В этой статье узнаете, как создать логотип по формату HTM, который можно закрепить под тематику, что будет без изображение ина чистом CSS. Отображение стрелок, треугольников и других простых фигур из HTML-элементов div и границ CSS - это популярный способ оптимизации производительности веб-сайта. В этой статье я представляю, как нарисовать логотип щита HTML, используя только HTML и CSS.
Так получится:
Форма HTML состоит из 4 отдельных элементов div: двух прямоугольных треугольников по бокам, прямоугольника посередине с текстом и равнобедренного треугольника внизу.
Код
<a class="pajzs" href="http://zornet.ru/">
<span class="Pajzs">
<span class="PajzsLeft">
</span>
<span class="PajzsMiddle">
HTML
</span>
<span class="PajzsRight">
</span>
<span class="PajzsBottom">
</span>
</span>
</a>
Код CSS использует чередование больших прозрачных и цветных границ для создания иллюзии треугольников:
Код
a.pajzs {
width: 350px;
font-family: Impact,Charcoal,sans-serif;
height: 350px;
display: block;
}
a.pajzs span{
display: block;
}
.PajzsLeft {
float: left;
width: 0;
border-left: 50px solid transparent;
border-top: 300px solid #CE5937;
}
.PajzsMiddle {
float: left;
width: 250px;
height: 230px;
background-color: #CE5937;
color: #FFF;
text-align: center;
padding-top: 70px;
font-size: 80px;
}
.PajzsRight {
float: left;
width: 0;
border-right: 50px solid transparent;
border-top: 300px solid #CE5937;
}
.PajzsBottom {
width: 0;
height: 0;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
border-top: 50px solid #CE5937;
clear: both;
margin-left: 50px;
}
Вот такое интересное решение.
Демонстрация
