Наверх

Шестиугольные и наклонные кнопки на чистом CSS

По умолчанию чистый 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;
}

hexagon

Благодаря хаку со стыками границ в 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;
}

trapezoid

Попробовать на примере.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *