Create dynamic arrow-like shape with CSS

Question

I would like to create complex arrow-like shape with CSS like this image:

This is the current code:

.camera_caption {
    position: relative;
    background-color: greenyellow;
    left: 0;
    margin-top: 263px;
    width: 717px;
    /*height: 234px;*/
    padding-left: 365px;
    font: normal 14px/24px 'Roboto';
    color: #fff;

}
.camera_caption:after {
    content: "";
    background: url(../images/capture_bg2.png) 0 0 no-repeat;
    position: absolute;
    height: 234px;
    width: 119px;
    right: -119px;
    top: 0;
}

The code is working but I have dynamic content insight the layer camera_caption which is dynamically changing based on content.

I need to also change the right side of the shape based on the size.

How I can implement the same result but with pure CSS?

Related to (or possible duplicate of) http://stackoverflow.com/questions/31024359/how-to-create-responsive-triangle-as-right-border/31025575#31025575 — Harry, Mar 04 '16 at 12:16
Yes, can you show me how the code from the code can be used for this post? — Peter Penzov, Mar 04 '16 at 12:23
[Here](https://jsfiddle.net/xq2pxmpv/) is a sample but as mentioned in my answer there I would recommend SVG because the CSS approach still needs tweaking (`padding-right` in this demo) when the height increases beyond a point. — Harry, Mar 04 '16 at 12:38
@Harry I tried to implement your code but this is the visual result http://i67.tinypic.com/640779.png I get transparent line at the center. Do you know why? — Peter Penzov, Mar 04 '16 at 17:31
Can you post your code in a fiddle or something? I will have a look and let you know. It's impossible to debug based on image :( — Harry, Mar 05 '16 at 03:53

score 2 · Accepted Answer · edited Mar 06 '16 at 21:07

background-gradient could be a possibility: (even borders can be drawn)

div {
  display: table;
  /* block shrinking to size of content */
  padding: 0.25em 2em 0.25em 0.5em;
  /* give some air to content */
  background: linear-gradient(-45deg, transparent 1em, #00A2E8 1em) bottom,
  /* +bg-size to cover half bottom */
  linear-gradient(-135deg, transparent 1em, #25B1ED 1em) top;
  /*different color for the show.  +bg-size to cover half bottom */
  background-repeat: no-repeat;
  /* no-repeat please */
  background-size: 100% 50%;
  /* spray each image/gradient only on half vertical */
  
  /* font  makeup*/
  font-size: 3em;
  color: white;
  text-shadow: -1px -1px 1px black, 1px 1px gray;
}
html {
  background:tomato;
  }

.bis {
  margin-top:10px;
  background: 
    linear-gradient(to top, white, white) no-repeat
    /* border-left*/,
    linear-gradient(to left, transparent 1.45em, white 1.45em) no-repeat
    /* border-top */,
    linear-gradient(to left, transparent 1.45em, white 1.45em) no-repeat bottom
    /* border-bottom */, 
    linear-gradient(-45deg, transparent 1em, white 1em, white 1.1em, #00A2E8 1em) bottom,
    /*border top righ and background  +bg-size to cover half bottom */
  linear-gradient(-135deg, transparent 1em, white 1em, white 1.1em, #25B1ED 1em) top
  /* border-bottom right and background +different color for the show.  +bg-size to cover half bottom */
  rgba(0, 0, 0, 0.05)
  /* see where the box lays */
  ;
  background-repeat: no-repeat;
  /* no-repeat please */
  background-size: 0.08em 100%, 100% 0.075em, 100% 0.075em, 100% 50%, 100% 50%;
  /* spray each image/gradient only where shapes has to be drawn */

}
.rounded {
    border-radius:0.5em 0 0 0.5em;
  box-shadow:inset 0.08em 0 white;
  }

<div class="camera_caption">whatever is there</div>
<div class="camera_caption bis">Or  elsewhere</div>

<div class="camera_caption bis rounded">around</div>

score 1 · Answer 2 · answered Mar 04 '16 at 14:25

Here is the pure css for the above shape, hope this will work for you.

.camera_caption{
    width: 300px;
    height: 80px;
    background: #00a2e8;
    position: relative;
}
.camera_caption:after {
    position: absolute;
    right: -40px;
    content: "";
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 40px solid #00a2e8;
}

HTML Tag

<div class="camera_caption"></div>

JS Fiddle https://jsfiddle.net/wv7c03u9/

score 0 · Answer 3 · answered Mar 04 '16 at 12:31

.arrow_box {
 position: absolute;
 background: #00A2E8;
    top:50px;
    width:200px;
    height:60px;
}
.arrow_box:after, .arrow_box:before {
 left: 10%;
 top: 0%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.arrow_box:after {
 border-color: rgba(136, 183, 213, 0);
 border-left-color: #00A2E8;
 border-width: 30px;
 margin-left: 180px;
    
}

<div class="arrow_box">
  </div>

Create dynamic arrow-like shape with CSS

3 Answers3

Linked