CSS-通過樣式實現各種圖形樣式

三角形

 1.角度向上

    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;

2. 角向下

 width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;

3. 角想左

  width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;

4. 角向右

 width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;

5.左直角

 width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;

6.右直角

  width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;

7.左下直角

 width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;

8.右下直角 

 width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;

圓形

width: 100px;
height: 100px;
border-radius: 50%;
background: #f00;

半圓

width: 100px;
height: 50px;
border-radius: 100px 100px 0 0;
background: #f00;

橢圓

width: 100px;
height: 50px;
border-radius: 100px / 50px;
background: #f00;

梯形

 height: 0;
 width: 120px;
 border-bottom: 120px solid #f00;
 border-left: 60px solid transparent;
 border-right: 60px solid transparent;

 平行四邊形

width: 160px;
height: 100px;
background: #f00;
transform: skew(30deg);

星星

.test {
				width: 0;
				height: 0;
				margin: 50px 0;
				color: #f00;
				position: relative;
				display: block;
				border-right: 100px solid transparent;
				border-bottom: 70px solid #f00;
				border-left: 100px solid transparent;
				-moz-transform: rotate(35deg);
				-webkit-transform: rotate(35deg);
				-ms-transform: rotate(35deg);
				-o-transform: rotate(35deg);
			}

			.test::before {
				height: 0;
				width: 0;
				position: absolute;
				display: block;
				top: -45px;
				left: -65px;
				border-bottom: 80px solid #f00;
				border-left: 30px solid transparent;
				border-right: 30px solid transparent;
				content: '';
				-webkit-transform: rotate(-35deg);
				-moz-transform: rotate(-35deg);
				-ms-transform: rotate(-35deg);
				-o-transform: rotate(-35deg);
			}

			.test:after {
				   content: '';
				    width: 0;
				    height: 0;
				    position: absolute;
				    display: block;
				    top: 3px;
				    left: -105px;
				    color: #f00;
				    border-right: 100px solid transparent;
				    border-bottom: 70px solid #f00;
				    border-left: 100px solid transparent;
				    -webkit-transform: rotate(-70deg);
				    -moz-transform: rotate(-70deg);
				    -ms-transform: rotate(-70deg);
				    -o-transform: rotate(-70deg);
			}

 

愛心

.test {
				position: relative;
			}

			.test::before,
			.test:after {
				content: "";
				width: 70px;
				height: 115px;
				position: absolute;
				background: red;
				left: 70px;
				top: 0;
				-webkit-border-radius: 50px 50px 0 0;
				-moz-border-radius: 50px 50px 0 0;
				border-radius: 50px 50px 0 0;
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				transform: rotate(-45deg);
				-webkit-transform-origin: 0 100%;
				-moz-transform-origin: 0 100%;
				-ms-transform-origin: 0 100%;
				-o-transform-origin: 0 100%;
				transform-origin: 0 100%;
			}

			.test:after {
				left: 0;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				-webkit-transform-origin: 100% 100%;
				-moz-transform-origin: 100% 100%;
				-ms-transform-origin: 100% 100%;
				-o-transform-origin: 100% 100%;
				transform-origin: 100% 100%;
			}