VDS за 300р от нашего партнера SpaceWeb
[78]
03 Фев 2014, 17:46

Шестиугольник на CSS

Привет!

Кто-нибудь встречал реализацию шестиугольника на CSS из одного элемента DIV? Нужна такая фигура для заключения в ней изображения. Делать маску из PNG изображения не очень хочется.

Комментарии (1)
grom 04.02.2014 14:17

Гексагон (Hexagon) на CSS:

<div class="hexagon"></div>

.hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
.hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
.hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
+1

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

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 13409]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 9179]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 8815]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 8098]
[124]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 6791]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 4925]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 4896]

Вести с Хабра