Create a dynamic arrow shape using CSS

Question

I would like to create a complex CSS arrow shape similar to 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 works, but I have dynamic content that describes a camera_caption layer that changes dynamically based on the content.

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

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

Answer 1

background-gradient may be an option: ( you can make even borders )

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>

Run code

Answer 2

css , , .

.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

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

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

Answer 3

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

Run code