2

Подскажите пожалуйста, как сделать блок с текстом как на картинке, чтобы если текст расширяет блок триугольник растягивался вместе с блоком. Стрелка)

1
  • триугольник...
    – Denis
    23 мая 2017 в 9:12

2 ответа 2

3

Вариант с 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>

2
  • А подскажите пожалуйста кроссбраузерность данного метода и возможно по svg уроки толковые можете посоветовать? Вы в ручную пишете полигон или экспортируете из редакторов? Спасибо за ответ очень полезен. 23 мая 2017 в 14:15
  • caniuse.com/#feat=css-clip-path
    – soledar10
    23 мая 2017 в 15:37
2

Как вариант можно сделать так :)

.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>

1
  • Интересный метод, спасибо. 23 мая 2017 в 14:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.