Corner Banner

Question

I am trying to create a banner with a triangular shape at the end.

.wrapper { padding: 50px; font-size: 0px; line-height: 0%; width: 0px; border-top: 20px solid gray; border-bottom: 20px solid gray; border-right: none; } 

 <div class="wrapper">TEXT HERE</div> 

Answer 1

Just helping you with this, as you tried, but it did not work as you expected ... So, the main idea is that we can use CSS pseudo-elements to create this effect.

Demo

 .wrapper { background: #C3C3C3; padding: 20px; font-size: 40px; font-family: Arial; text-align: center; position: relative; } .wrapper:after { content: ""; width: 0; height: 0; border-top: 42px solid transparent; border-bottom: 42px solid transparent; border-right: 40px solid white; /* Tweak this to increase triangles height */ position: absolute; right: 0; top: 0; } 

I’m not doing anything here, we use the pseudo-element ie nothing but a virtual element that is not in the DOM, but we can insert it using CSS and positioning this pseudo-element on the right side of your wrapper. This will help you get the tape as an end. Note that the color of the triangle is hard-coded and not transparent.

Answer 2

Try it, it works

 .wrapper { font-family: arial; font-size: 12px; color: white; background-color: black; border: 1px solid white; padding: 8px; width: 100px; text-align: center; position: relative; } .wrapper:after { content: ''; position: absolute; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-right: 16px solid white; z-index: 10; top: 0px; right: 0px; } 

 <div class="wrapper">TEXT HERE</div> 

Answer 3

here is the violin. https://jsfiddle.net/nileshmahaja/s5egaebr/

I used: after selector to wrapper div.

CSS

 .wrapper { padding: 0 50px; font-size: 0px; line-height: 0%; width: 0px; height:120px; background:#ddd; position:relative; width:500px; } .wrapper:after { content:''; width: 0px; height: 0px; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-right: 60px solid #fff; position:absolute; right:0 }