Banner with angled shapes

This question already has an answer here:

How do CSS triangles work? 18 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..

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;
}

Here, am doing nothing fancy, we are using a pseudo element ie 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.

---

试试这个工作

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

---

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
}

链接地址: http://www.djcxy.com/p/89484.html

上一篇: 在这个CSS下拉菜单中，下箭头来自哪里

下一篇: 与有角度的形状的横幅