Tag:css3
Article From:https://segmentfault.com/q/1010000012149757
Question:

The need is this: the width is uncertain
How to implement it

Answer 0:
<div id='chevron'></div>
#chevron {
  position: relative;
  text-align: center;

  margin-bottom: 6px;
  height: 34px;
  width: 200px;
  background:red;
}
#chevron:before {
  width: 0px; 
   height: 0px; 
   border-top: 12px solid red; 
   border-right: 100px solid transparent; 
  position:absolute;
  left:0;
  top:100%;
  content:'';
}
#chevron:after{
  width: 0px; 
      height: 0px; 
      border-top: 12px solid red; 
      border-left: 100px solid transparent;
  position:absolute;
  right:0;
  top:100%;
  content:'';
}

Answer 1:

 .border{
            width: 0;
            height: 0;
            border-left: 50px solid red;
            border-right: 50px solid red;
            border-top: 50px solid red;
            border-bottom: 50px solid transparent; 
        }
    

It’s OK to set the width as you want. If not, you can use CSS’s VaR to define it, or use less or sass.

Answer 2:

It’s good to find UI little sister for you

Similar Posts:

Link of this Article: How CSS3 implements such graphics

Leave a Reply

Your email address will not be published. Required fields are marked *