奇妙的 CSS shapes(CSS图形)

图集1/24

正文 7130字数 928,817阅读

CSS 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天就向大家介绍几个比较新的强大的 CSS 功能：

clip-path
shape-outside
shape 的意思是图形，CSS shapes 也就是 CSS 图形的意思，也就是使用 CSS 生成各种图形（圆形、矩形、椭圆、多边形等几何图形）。

CSS3之前，我们能做的只有矩形，四四方方，条条框框。

CSS3
CSS3出来后，我们有了更广阔的施展空间，通过

border-radius
border
transform
伪元素配合
gradient 渐变
我们能够作出非常多的几何图形。

除去最常见的矩形，圆形（border-radius），下面稍微列举一些其他几何图形：

三角形
通常会使用透明的border模拟出一个三角形：

<style>.traingle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid yellowgreen;
}
</style><div class="traingle "></div>

Run code

Cut to clipboard

切角
《CSS Secret》里面的方法，采用多重线性渐变实现切角。

<style>.notching {
    width: 40px;
    height: 40px;
    padding: 40px;
    background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,
        linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,
        linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,
        linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}</style><div class="notching"></div>

Run code

Cut to clipboard

梯形
利用伪元素加旋转透视实现梯形：

<style>
.trapezoid{
    position: relative;
    width: 60px;
    padding: 60px;
}
 
.trapezoid::before{
    content:"";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: perspective(20px) scaleY(1.3) rotateX(5deg);
    transform-origin: bottom;
    background: yellowgreen;
}</style><div class="trapezoid"></div>

Run code

Cut to clipboard

当然，还有另一种更简单的方法是利用border实现，借助上面的构造三角形的方法，在矩形两侧构造两个透明的三角形：

<style>
.trapezoid {
    position: relative;
    width: 60px;
    border-top: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
</style><div class="trapezoid"></div>

Run code

Cut to clipboard

五边形
梯形加上三角形，很容易就组合成一个五边形，这里需要借助一个伪元素实现：

<style>
.pentagon {
    position: relative;
    width: 60px;
    border-bottom: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
 
.pentagon::before {
    content:"";
    position: absolute;
    top: 60px;
    left: -40px;
    border-top: 60px solid yellowgreen;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}
</style><div class="pentagon"></div>

Run code

Cut to clipboard

六边形
看看上面的梯形，如果两个反方向且底边同样大小的梯形，叠加在一起，是不是就能得到一个六边形呢？

<style>
.pentagon {
    position: relative;
    width: 60px;
    border-bottom: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
.pentagon::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 0px;
    top: 60px;
    left: -40px;
    border-top: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
</style><div class="pentagon"></div>

Run code

Cut to clipboard

八边形
六边形都解决了，八边形也不在话下，一个矩形加上两个梯形，可以合成一个八边形。

<style>
.octagon {
    position: relative;
    width: 40px;
    height: 100px;
    background: yellowgreen;
}
.octagon::before {
    content: "";
    height: 60px;
    position: absolute;
    top: 0;
    left: 40px;
    border-left: 30px solid yellowgreen;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.octagon::after {
    content: "";
    height: 60px;
    position: absolute;
    top: 0;
    left: -30px;
    border-right: 30px solid yellowgreen;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
</style><div class="octagon"></div>

Run code

Cut to clipboard

五角星
好的，探索完多边形，我们继续探索X角星。
先来看看五角星，要怎么实现呢？当然是直接打出来啦 -- ★☆
开个玩笑，这里使用 3 个三角形叠加旋转在一起实现。

<style>
.star {
   margin: 50px 0;
   position: relative;
   width: 0;
   border-right: 100px solid transparent;
   border-bottom: 70px  solid yellowgreen;
   border-left: 100px solid transparent;
   transform: rotate(35deg) scale(.6);
}
.star:before {
    content: '';
    position: absolute;
    border-bottom: 80px solid yellowgreen;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -45px;
    left: -65px;
    transform: rotate(-35deg);
}
.star:after {
    content: '';
    position: absolute;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid yellowgreen;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}
</style><div class="star"></div>

Run code

Cut to clipboard

六角星
六角星呢？想象一下，一个向上的三角形 ▲，叠加上一个向下的三角形 ▼，就可以得到一个六边形：

<style>
.sixstar {
    position: relative;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid yellowgreen;
}
.sixstar:after {
    content: "";
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid yellowgreen;
    top: 30px;
    left: -50px;
}
</style><div class="sixstar"></div>

Run code

Cut to clipboard

八角星
八角星呢？八个角那么多呢。其实使用两个矩形进行旋转拼接就可以了。

<style>
.eightstar {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    transform: rotate(30deg);
}
 
.eightstar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    background-color: yellowgreen;
}
</style><div class="eightstar"></div>

Run code

Cut to clipboard

十二角星
好。最后多角星再来一个十二级角星。在八角星的基础上，再增加一个矩形，就能得到十二角啦。也就是要过第一个伪元素。

<style>
.twelvestar {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 100px!important;
    background-color: yellowgreen;
    transform: rotate(30deg);
}
 
.twelvestar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: rotate(30deg);
    background-color: yellowgreen;
}
 
.twelvestar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: rotate(60deg);
    background-color: yellowgreen;
}
</style><div class="twelvestar"></div>

Run code

Cut to clipboard

椭圆
最后，再来使用传统的方法画一个椭圆，过去 CSS3 画椭圆，基本上只能借助 border 实现。
这里使用 border 画一个蛋的形状：

<style>
.ellipse {
   width: 120px;
   height: 160px;
   background-color: yellowgreen;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style><div class="ellipse"></div>

Run code

Cut to clipboard

CodePen -- CSS Shapes(CSS 几何图形)
上面所讲述的是使用传统 CSS3 的方式绘制几何图形，接下来我们将要了解一些更高级的绘制几何图形的方法。

有过 15 条评论 »

广西南宁市 2017-06-13, 09:24:14

reply | quote | #¹⁰

广西南宁市 2017-06-13, 09:27:38

reply | quote | #¹¹

广西南宁市 2017-06-13, 09:37:06

reply | quote | #¹²

广西南宁市 2017-06-13, 09:40:45

reply | quote | #¹³

广西南宁市 2017-06-13, 10:08:47

四种纯css进度条

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>Progress</title>
		<style>
			*+.tg-progress {
				margin-top: 15px;
			}
			
			.tg-progress {
				box-sizing: border-box;
				height: 20px;
				margin-bottom: 15px;
				background: #f7f7f7;
				overflow: hidden;
				line-height: 20px;
				box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), inset 0 2px 2px rgba(0, 0, 0, .07);
				border-radius: 4px;
			}
			
			.tg-progress-bar {
				width: 0;
				height: 100%;
				background: #009dd8;
				float: left;
				-webkit-transition: width .6s ease;
				transition: width .6s ease;
				font-size: 12px;
				color: #fff;
				text-align: center;
				background-image: -webkit-linear-gradient(top, #00b4f5, #008dc5);
				background-image: linear-gradient(to bottom, #00b4f5, #008dc5);
				box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(0, 0, 0, .1);
				text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
			}
			
			.tg-progress-striped .tg-progress-bar {
				background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				background-image: linear-gradient(-45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
				background-size: 30px 30px;
			}
			
			.tg-progress-striped.tg-active .tg-progress-bar {
				-webkit-animation: tg-progress-bar-stripes 2s linear infinite;
				animation: tg-progress-bar-stripes 2s linear infinite;
			}
			
			@keyframes tg-progress-bar-stripes {
				0% {
					background-position: 0 0;
				}
				100% {
					background-position: 30px 0;
				}
			}
			
			.tg-progress-danger .tg-progress-bar {
				background-color: #d32c46;
			}
		</style>
	</head>

	<body>
		<div class="tg-progress">
			<div class="tg-progress-bar" style="width: 40%;">40%</div>
		</div>
		<div class="tg-progress tg-progress-striped">
			<div class="tg-progress-bar" style="width: 65%;"></div>
		</div>
		<div class="tg-progress tg-progress-striped tg-active">
			<div class="tg-progress-bar" style="width: 85%;"></div>
		</div>
		<div class="tg-progress tg-progress-striped tg-active tg-progress-danger">
			<div class="tg-progress-bar" style="width: 85%;"></div>
		</div>
	</body>

</html>

reply | quote | #¹⁴

广西南宁市 2017-06-13, 11:58:37

仿造唯品会头部banner大图广告模特闪边ad图js效果

<style>
 
    .j-sp-ani{width:260px;height:610px;position: absolute;right:131px;top:58px;background: url(https://out.img.pan.lizhenqiu.com/eaeca7a66e50b79338bdedc10bdc45341497326196000) no-repeat;
        -webkit-animation:run 6.2s steps(8, end) infinite;
        -moz-animation:run 6.2s steps(8, end) infinite;
        -ms-animation:run 6.2s steps(8, end) infinite;
        -o-animation:run 6.2s steps(8, end) infinite;
        animation:run 6.2s steps(8, end) infinite;
    }
    @-webkit-keyframes run {
        0% {
            background-position: 0 0;
        }
        43% {
            background-position: 0 0;
        }
        50% {
            background-position: -2080px 0;
        }
        93% {
            background-position: -2080px 0;
        }
        100% {
            background-position: -4160px 0;
        }
    }
    @-moz-keyframes run {
        0% {
            background-position: 0 0;
        }
        43% {
            background-position: 0 0;
        }
        50% {
            background-position: -2080px 0;
        }
        93% {
            background-position: -2080px 0;
        }
        100% {
            background-position: -4160px 0;
        }
    }
    @-ms-keyframes run {
        0% {
            background-position: 0 0;
        }
        43% {
            background-position: 0 0;
        }
        50% {
            background-position: -2080px 0;
        }
        93% {
            background-position: -2080px 0;
        }
        100% {
            background-position: -4160px 0;
        }
    }
    @-o-keyframes run {
        0% {
            background-position: 0 0;
        }
        43% {
            background-position: 0 0;
        }
        50% {
            background-position: -2080px 0;
        }
        93% {
            background-position: -2080px 0;
        }
        100% {
            background-position: -4160px 0;
        }
    }
    @keyframes run {
        0% {
            background-position: 0 0;
        }
        43% {
            background-position: 0 0;
        }
        50% {
            background-position: -2080px 0;
        }
        93% {
            background-position: -2080px 0;
        }
        100% {
            background-position: -4160px 0;
        }
    }
</style><div class="j-sp-ani"></div>

#,广西南宁市,2017-06-13,12:08:12,

reply | quote | #¹⁵

Records:15 2/2 «‹1 2 ›»

lizhenqiu blog

奇妙的 CSS shapes(CSS图形)

相关日志

有过 15 条评论 »

留下評論