Please tell me how to make a block with the text as in the picture, so that if the text expands the block the triangle will stretch along with the block. Arrow)

  • Tr and gon ... - Denis

2 answers 2

Option with 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>

  • And please tell me the cross-browser compatibility of this method, and is it possible to advise on svg explanatory lessons? Do you manually write a polygon or export from editors? Thanks for the reply very helpful. - junior-web-dev
  • caniuse.com/#feat=css-clip-path - soledar10

As an option, you can do so :)

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

  • An interesting method, thank you. - junior-web-dev