Подскажите пожалуйста, как сделать блок с текстом как на картинке, чтобы если текст расширяет блок триугольник растягивался вместе с блоком.
2 ответа
Вариант с clip-path
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.triangle{
margin-bottom: 10px;
max-width: 250px;
padding: 10px 10px 10px 30px;
background: #333;
color: #ccc;
-webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
-webkit-clip-path: url("#clip-triangle");
clip-path: url("#clip-triangle");
}
<div class="triangle">text</div>
<div class="triangle">text text text text text text text text text text text text</div>
<div class="triangle">Подскажите пожалуйста, как сделать блок с текстом как на картинке, чтобы если текст расширяет блок триугольник растягивался вместе с блоком.</div>
<svg width="0" height="0">
<defs>
<clipPath id="clip-triangle" clipPathUnits="objectBoundingBox">
<polygon points="0.1 0, 1 0, 1 1, 0.1 1, 0 0.5" />
</clipPath>
</defs>
</svg>
-
А подскажите пожалуйста кроссбраузерность данного метода и возможно по svg уроки толковые можете посоветовать? Вы в ручную пишете полигон или экспортируете из редакторов? Спасибо за ответ очень полезен. 23 мая 2017 в 14:15
-
Как вариант можно сделать так :)
.dd {
min-height: 20px;
position: relative;
width: 200px;
overflow-y: hidden;
margin: 10px ;
position: relative;
padding: 0 15px;
z-index: 9;
color: #fff;
}
.dd> p {
position: relative;
z-index: 9;
}
.dd:before {
position:absolute;
height: 0;
top: 50%;
max-width: 300%;
border-right: 500px solid #3aa5de;
border-bottom: 1000px solid transparent;
content: "";
left: 90%;
border-radius:0;
margin-left: 10px;
transform: scaleX(-1) translateX(100%);
}
.dd:after {
position:absolute;
height: 0;
top: 50%;
transform:scaleY(-1) scaleX(-1) translateY(100%) translateX(100%);
max-width: 300%;
border-radius:0;
border-right: 500px solid #3aa5de;
border-bottom: 1000px solid transparent;
content: "";
left: 90%;
margin-left: 10px;
}
.ddd {
min-height: 20px;
position: relative;
width: 200px;
overflow: hidden;
margin: 10px ;
position: relative;
padding: 0 15px 0 30px;
z-index: 9;
color: #fff;
}
.ddd> p {
position: relative;
z-index: 9;
}
.ddd:before {
position:absolute;
height: 0;
top: 50%;
max-width: 100%;
border-left: 500px solid #3aa5de;
border-bottom: 1000px solid transparent;
content: "";
left: 0%;
border-radius:0;
//margin-left: 10px;
transform: scaleX(-1) translateX(0%);
}
.ddd:after {
position:absolute;
height: 0;
top: 50%;
transform:scaleY(-1) scaleX(-1) translateY(100%) translateX(0%);
max-width: 100%;
border-radius:0;
border-left: 500px solid #3aa5de;
border-bottom: 1000px solid transparent;
content: "";
left: 0%;
//margin-left: 10px;
}
<div class="dd"><p>Lorem ipsum dolor sit amet.</p></div>
<div class="dd"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, id.</p></div>
<div class="ddd"><p>Lorem ipsum dolor sit amet.</p></div>
<div class="ddd"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, id.</p></div>