I'm trying to make a frame with a lower arrow as in the picture. enter image description here

Tormented. does not work..

.block { width: 400px; padding: 10px; background: #fff; min-height: 100px; position: relative; border: 1px solid #aaa; margin: 10px 10px 10px 40px; } .block span.triangle { width: 0; height: 0; display: block; position: absolute; bottom: -30px; left: auto; right: 17%; border-top: 30px solid #fff; border-left: 30px solid transparent; } .block span.triangle:before { content: ''; width: 40px; display: block; position: absolute; top: 15px; right: 45px; border-top: 1px solid #aaa; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .block span.triangle:after { content: ''; width: 30px; display: block; position: absolute; top: 10px; left: -30px; border-top: 1px solid #aaa; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 
 <div class="block"> some text <span class="triangle"></span> </div>

    2 answers 2

     body { background: #eee; } .block { width: 400px; padding: 10px; background: #fff; min-height: 100px; position: relative; border: 1px solid #aaa; margin: 10px 10px 10px 40px; } .block:after { content: ''; width: 30px; height: 30px; display: block; position: absolute; bottom: -16px; right: 40px; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: linear-gradient(45deg, #fff 50%, rgba(255, 255, 255, 0) 50%); } 
     <div class="block"> some text <span class="triangle"></span> </div>

      As for example using pseudo-elements and triangles:

       * { box-sizing: border-box; } html, body { padding: 0; margin: 0; } .block { width: 400px; padding: 10px; background: #fff; min-height: 100px; position: relative; border: 1px solid #aaa; margin: 10px 10px 10px 40px; } .block:before, .block:after { content: ''; position: absolute; width: 0; height: 0; } .block:before { border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 32px solid #aaa; right: 29px; bottom: -32px; z-index: 1; } .block:after { border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #fff; right: 30px; bottom: -29px; z-index: 2; } 
       <div class="block"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi vitae nemo aut quisquam incidunt mollitia provident rerum doloribus doloremque dolorem! </div>