Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Banner with angled shapes [duplicate]

Tags:

css

css-shapes

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

like image 387
PokéDev Avatar asked Apr 21 '15 18:04

PokéDev


3 Answers

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.

like image 110
Mr. Alien Avatar answered Nov 09 '22 12:11

Mr. Alien


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>
like image 34
Dev Man Avatar answered Nov 09 '22 11:11

Dev Man


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
}
like image 2
Nilesh Mahajan Avatar answered Nov 09 '22 11:11

Nilesh Mahajan