Banner with angled shapes

Question

I'm 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>

enter image description here

Why the down vote? He tried the thing he has posted – Mr. Alien Apr 21 '15 at 18:37 — Mr. Alien, Apr 21 '15 at 18:37

score 4 · Accepted Answer · edited Apr 04 '20 at 19:42

Just helping you out with this as you've tried but it didn't worked as you expected... So basic idea is that we can use CSS pseudo elements to create that effect..

.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;
  position: absolute;
  right: 0;
  top: 0;
}

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

Here, am doing nothing fancy, we are using a pseudo element i.e nothing but a virtual element which doesn't exist in the DOM but we can insert it using CSS and positioning that pseudo element to the right side of your wrapper. This will help you get the ribbon like end. Note that the color of the triangle is hard coded and it's not transparent.

If I wanted it not to go the full length of the page do I have to implement something like width:200px; in the wrapper? — PokéDev, Apr 21 '15 at 18:50
@BhoffDev Yes, just make sure your text is in the limits else it will overlay or it will hide behind the triangle... inorder to prevent that assign some `padding-right` to your wrapper element so that it prevents the text if it's a long string — Mr. Alien, Apr 21 '15 at 19:12

Nilesh Mahajan · Answer 2 · 2015-04-23T14:07:23.363

2

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

I have used :after selector to the 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
}

edited Apr 23 '15 at 14:07

answered Apr 21 '15 at 18:43

Nilesh Mahajan

3,506
21
34

I used your width:500px; in the wrapper combined with Mr. Allens answer to get my final product. – PokéDev Apr 21 '15 at 19:08

score 1 · Answer 3 · answered Apr 21 '15 at 18:41

Try this 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>

Banner with angled shapes

3 Answers3