Using CSS to realize BMW logo

One day suddenly encountered an interesting face test, need to implement a BMW logo CSS, the first reaction is this is not the cliché of the small deformation of the gossip map, just use pseudo-elements can be easily realized, but a closer look requires that only in a label to write the style, so woo-hum ... Ask the big God, or there are a variety of methods, the following simple share ha!

Achieve the following effects:

The first: the use of pseudo-elements to implement

#box{width:100px;Height:100px;Border-radius:100%;Background-color:#fff;position:relative;Border:1px solid #000;Overflow:Hidden;}#box: Before{position:Absolute;content:"';Top:0; Left:0;width:50px;Height:50px;Background-color:Blue;}#box: after{position:Absolute;content:"'; Right:0;Bottom:0;width:50px;Height:50px;Background-color:Blue;}

The second type: using border to achieve

#boxs {    width:0;     height:0;     Border-radius:100%;     border-width:50px;     border-style:solid;     border-color: #fff blue #fff Blue;     transform: Rotatez (45deg);     box-shadow: 0 0 1px #000;}

Third: Using CSS3 new attribute conic-gradient implementation (compatibility is very big yo)

#box1 {    width: 100px;     height: 100px;     background: conic-gradient (Blue 0% 25%, white 25% 50%, blue 50% 75%, white 75% 100%);     Border-radius: 100%;     Border: 1px solid #000;}

CSS is really profound, do not easily say that they are very good at CSS, in fact, you just have to look at the Zhang Xin Asahi great God's blog you feel that they are really the tip of the iceberg, after a lot of accumulation, thick thin hair!

Using CSS to realize BMW logo