По умолчанию чистый CSS не предназначен для создания фигур, отличных от прямоугольника. Конечно, CSS3 привнес множество отличных методов, в том числе наклонов и трансформаций, однако все они влияют и на содержимое изменяемого блока.
Чтобы создать шестиугольную кнопку без использования картинок, разделим ее на 3 фрагмента: левый и правый «уголки» и середину, содержащую текст кнопки:
<div class="hexagon">
<span class="l"></span>
<span class="center">Press Me!</span>
<span class="r"></span>
<div class="clear"></div>
</div>
Теперь применим к ним соответствующие стили:
.hexagon {
cursor: pointer;
margin: 30px auto;
width: 400px;
}
.hexagon .l {
border-color: transparent #ff7700 transparent transparent;
border-style: solid;
border-width: 43px 30px 43px 0;
display: block;
float: left;
height: 0;
width: 0;
}
.hexagon .r {
border-color: transparent transparent transparent #ff7700;
border-style: solid;
border-width: 43px 0 43px 30px;
display: block;
float: right;
height: 0;
width: 0;
}
.hexagon .center {
background: #ff7600;
border: 0;
color: #fff;
display: block;
float: left;
font-size: 30px;
font-weight: 500;
height: 86px;
line-height: 86px;
overflow: hidden;
text-align: center;
text-shadow: 3px 4px 10px rgba(0, 0, 0, 1);
text-transform: uppercase;
width:calc(100% - 60px);
}
.hexagon:hover .l{
border-right-color:#B75500;
}
.hexagon:hover .r{
border-left-color:#B75500;
}
.hexagon:hover .center{
background:#B75500;
}
Благодаря хаку со стыками границ в CSS можно создавать практически любые наклонные формы, однако, в некоторых браузерах (например Safari под MacOS) может возникнуть искажение на стыке блоков l, r и center. Потестировать работоспособность можно здесь.
Таким же образом можно создать и наклонную кнопку:
<div class="trapezoid">
<span class="l"></span>
<span class="center">Press Me!</span>
<span class="r"></span>
<div class="clear"></div>
</div>
Наклон и положение «уголков» зависит от ширины и цвета каждой из границ.
.trapezoid {
cursor: pointer;
margin: 30px auto;
width: 400px;
}
.trapezoid .l {
border-color: transparent transparent #ff7700 transparent;
border-style: solid;
border-width: 0 0 86px 30px;
display: block;
float: left;
height: 0;
width: 0;
}
.trapezoid .r {
border-color: #ff7700 transparent transparent transparent ;
border-style: solid;
border-width: 86px 30px 0 0;
display: block;
float: right;
height: 0;
width: 0;
}
.trapezoid .center {
background: #ff7600;
border: 0;
color: #fff;
display: block;
float: left;
font-size: 30px;
font-weight: 500;
height: 86px;
line-height: 86px;
overflow: hidden;
text-align: center;
text-shadow: 3px 4px 10px rgba(0, 0, 0, 1);
text-transform: uppercase;
width:calc(100% - 60px);
}
.trapezoid:hover .l{
border-bottom-color:#B75500;
}
.trapezoid:hover .r{
border-top-color:#B75500;
}
.trapezoid:hover .center{
background:#B75500;
}
А слабо сделать кнопку шестиугольную такую же, но с обводкой )) Я уже 6 способов придумал, но все они далеки от идеала