Можно ли сверстать такой блок как на картинке. Возможно ли это средствами css или проще сделать картинкой ?
1 ответ
Можно, используя псевдоэлемент :after
.box {
position: relative;
background: #999;
height: 150px;
}
.box:after {
top: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: #999 transparent transparent transparent;
border-width: 25px 25px 0 0;
margin-left: -15px;
}
<div class="box">box</div>
Добавлено:
Если блок и треугольник (прямоугольный) будут иметь тень, то всё-же придется делать картинкой.
При равностороннем треугольнике можно решить проблему тени с помощью transform
. Например: jsfiddle.
-
2Может быть стоит дополнить. Если блок и треугольник будут иметь тень, то придется делать картинкой и через
css
уже не получится 25 ноя 2015 в 12:54