CSS Disclosure (iii) shape

Source: Internet
Author: User

Chapter 3

1. Ellipse

The implementation of the ellipse relies primarily on the Border-radius property, which determines the radius of the bounding rectangle fillet, can specify the value px, or it can be displayed as a percentage

And this property is very flexible, Four corners can be set separately

width:200px;height:200px;                    Square--------------------------------------------------------border-radius:100px;          Round border-radius:50%/50%;     Horizontal radius/Vertical radius--------------------------------------------------------border-radius:50px/20px;    Oval Corner
--------------------------------------------------------
border-radius:50%/100% 100% 0 0 //half ellipse, bottom vertical fillet 0 o'clock horizontal fillet also automatically 0, no need to specify again

2. Parallelogram

The implementation of the parallelogram relies on the Transform:skew () to choose the direction of the tilt x-axis or y-axis

The question to solve is: How to keep the content constant while the container is tilted?

<a href= "#yolo" class= "button" ><div>click me</div></a>------------------------------- --------------------. Button{Transform:skewx (45deg); }. button > div{Transform:skewx ( -45deg); }//Text settings reverse tilt to counteract the tilt of the container. Button{Display:Inline-block;padding:. 5em 1em;Border:0;margin:. 5em;background:#58a;Color: White;Text-transform:Uppercase;text-decoration:None;Font:Bold 200%/1 Sans-serif;}

. Button{//Host elementposition:relative;Display:Inline-block;padding:. 5em 1em;Border:0;margin:. 5em;background:Transparent;Color: White;Text-transform:Uppercase;text-decoration:None;Font:Bold 200%/1 Sans-serif;}. Button::before{//pseudo elementcontent:"';/*To generate the box*/position:Absolute;Top:0; Right:0;Bottom:0; Left:0;Z-index:-1;background:#58a;Transform:skew (45deg);}

You want to deform the element without deforming the content can be used

3. Simple pie chart

There are two ways to implement pie charts: gradients and SVG

Gradient combined with pseudo-elements to achieve rotation, note that after more than 50% to reverse the pseudo-element background color;

In this way, dynamic rotation animations can also be used as a display for loading progress

<div class= "pie" ></div>------------------------------------------------------------------------ --------------------. Pie{width:100px;Height:100px;Border-radius:50%;background:Yellowgreen;Background-image:Linear-gradient (to right, transparent 50%, CurrentColor 0);Color:#655;}. Pie::before{content:"';Display:Block;Margin-left:50%;Height:100%;Border-radius:0 100% 100% 0/50%;Background-color:Inherit;Transform-origin: Left;Transform:Rotate (0.15turn); Set Rotation Angle}

The SVG implementation is to draw circles and strokes first, then draw a larger circle on the lower level of the stroke.

The first parameter of the dashed Edge property Stroke-dasharray indicates the dash length, and the second is the gap length between the dashed lines

 <svg width= "" height= "" ><circle r= "" "" cx= "cy=" >------------------------------------------svg  { Transform :  rotate ( -90deg) ;  background :  Yellowgreen ;  Border-radius :  50% ;} circle  { fill :  Yellowgreen ;  stroke :  #655 ;  Stroke-width : 50 ; //the width is twice times the radius stroke-dasharray : 50 160; //The second parameter is perimeter } 

CSS Disclosure (iii) shape

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.