This question has already been answered:

I need to impose a window in the form of such

Comment

In this picture you can see that the block has a "Triangle" I need to do this using css or svg here is a blank if that

 .message-block { width: 300px; height: 70px; border: 1px solid #ccc; box-shadow: 0 0 2px #ddd; } 
 <div class="message-block"></div>

UPD. Not a duplicate as it seems to me not relevant to this issue.

Reported as a duplicate by participants Sasha Omelchenko , aleksandr barakin , Pavel Mayorov , Yaroslav Molchan , MihailPw Jun 7 '17 at 11:21 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • css-tricks.com/examples/ShapesOfCSS - maybe this will help you ... - C.Raf.T
  • one
    What about look at the element, a screenshot of which is attached? - MihailPw
  • only width and height are written there, but nothing is said about the triangle - ishidex2
  • Not sure if this is a duplicate, CSS is such that different triangles are made in completely different ways) - andreymal
  • @andreymal in my response such CSS that even SVG :-) - Sasha Omelchenko

2 answers 2

So you can

 *{ box-sizing:border-box; margin;0; padding:0; } .box{ width:500px; margin:auto; } .cssarrow { position: relative; background: #fff; border: 3px solid #c2e1f5; width:400px; min-height:150px; float:right; } .cssarrow:after, .cssarrow:before { right: 100%; top: 0; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .cssarrow:after { border-color: rgba(136, 183, 213, 0); border-top:35px solid #c2e1f5; border-left:35px solid #fff; margin-top: -3px; } .cssarrow:before { border-color: rgba(194, 225, 245, 0); border-top:30px solid #fff; border-left:32px solid transparent; z-index:100; left:-31px; } textarea{ max-width:391px; border:none; outline:none; background:none; width:391px; min-height:150px; padding:10px; font-size:20px; } img{ display:block; width:80px; } p.user{ float:left; margin:-10px; } 
 <div class="box"> <p class="user"><img src="http://www.bfl.in.ua/wp-content/uploads/2015/06/w450h4001385925286User.png" alt=""> <p> <div class="cssarrow"> <textarea placeholder="Describe yourself here..."></textarea> </div> </div>

    Try this:

     .message-block { width: 120px; height: 80px; background: green; position: relative; left: 20% } .message-block:before { content:""; position: absolute; right: 100%; width: 0; height: 0; border-left: 20px solid transparent; border-right: 26px solid green; border-bottom: 20px solid transparent; } 
     <div class="message-block"></div>

    • And with a white background and a gray stroke? - andreymal