6
Есть ли способ создать резкий плоский угол с CSS и HTML?Плоский резкий угол или скошенные углы
Что-то вроде этого:
____
/ \
| |
\____/
A
ответ
10
Вот мое решение, используя CSS формы от Криса Coyier.
http://jsfiddle.net/dDejan/XSs9L/
4 дополнительных дивы вставляются с помощью JavaScript (ну, на самом деле JQuery) для каждого из контейнеров, которые вы хотите образными этот путь. Эти дивы расположены абсолютно в углах его родителей, и они оформлены соответственно, как описано в ссылке, публикуемую Свен Bieder
3
Вы можете составить это, используя абсолютно позиционирование :before и :after элементов, используя CSS triangles техники.
<div class="box"></div>
CSS:
.box {
background-color:#2020ff;
height:50px;
width:50px;
position:relative
}
.box:after {
content:" ";
width: 0;
height: 0;
border-top: 10px solid #ffffff;
border-bottom: 10px solid transparent;
border-right:10px solid #ffffff;
position:absolute;
top:-9px;
right:0px;
}
+0
Это звучит как хорошее начало, уход поделиться примером кода ? – zehelvion
+0
Это выглядит хорошо, но не могли бы вы объяснить код? Я не совсем понимаю, как это работает? – zehelvion
+1
Это старый трюк, делающий треугольник из угла куска границы. В этом случае это белый треугольник, который покрывает часть синей коробки. Вы можете отредактировать настройки в: после просмотра, как это работает. Используйте еще один с: перед тем, чтобы скрыть верхний левый угол. Вот как это работает: http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work –
21
Посмотрите здесь. Там вы найдете все, что вам нужно:
http://css-tricks.com/examples/ShapesOfCSS/
Редактировать В случае ссылка идет потеряно:
CSS
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0; left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px; height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
+0
Да, вы правы, я изменил его –
+0
Но вы не получили принятых ответьте сейчас. Позор. Твой лучше. –
+0
Не проблема. Когда другой ответ работает лучше для него, тогда все в порядке. В конце концов, это помогает людям, а не тем, кто принимает. –
1
box {
background-color: transparent;
position: fixed;
width: 300px;
height: 300px;
}
svg {
width: 300px;
height: 300px;
}
polygon {
visibility: visible;
background: black;
stroke: white;
}<box>
<svg>
<polygon points="0 250, 50 300, 300 300, 300 50, 250 0, 0 0" />
</svg>
</box>
Это можно сделать только с одним дополнительным элементом –
Полезно знать @VladimirStarkov, спасибо за этот проницательный комментарий :) – dDejan