45 个值得收藏的 CSS 形状

最新推荐文章于 2023-12-08 16:37:00 发布
最新推荐文章于 2023-12-08 16:37:00 发布
阅读量652 收藏
点赞数
原文链接：https://css-tricks.com/the-shapes-of-css/
版权

640?wx_fmt=jpeg

本文经 SegmentFault （公众号ID：segmentfault_sudo）授权转载，作者：前端小智

前言

由于此订阅号换了个皮肤，导致用户接受文章不及时。读者可以打开订阅号「Web项目聚集地」，选择置顶（标星）公众号，重磅干货，第一时间送达！

正文

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。

我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。

虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。

1. 正方形

640?wx_fmt=png

#square {	
  width: 100px;	
  height: 100px;	
  background: red;	
}

2. 长方形

640?wx_fmt=png

#rectangle {	
  width: 200px;	
  height: 100px;	
  background: red;	
}

3. 圆形

640?wx_fmt=png

#circle {	
  width: 100px;	
  height: 100px;	
  background: red;	
  border-radius: 50%	
}

4. 椭圆形

640?wx_fmt=png

#oval {	
  width: 200px;	
  height: 100px;	
  background: red;	
  border-radius: 100px / 50px;	
}

5. 上三角

640?wx_fmt=png

#triangle-up {	
  width: 0;	
  height: 0;	
  border-left: 50px solid transparent;	
  border-right: 50px solid transparent;	
  border-bottom: 100px solid red;	
}

6. 下三角

640?wx_fmt=png

#triangle-down {	
  width: 0;	
  height: 0;	
  border-left: 50px solid transparent;	
  border-right: 50px solid transparent;	
  border-top: 100px solid red;	
}

7. 左三角

640?wx_fmt=png

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

8. 右三角

640?wx_fmt=png

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

9. 左上角

640?wx_fmt=png

#triangle-topleft {	
  width: 0;	
  height: 0;	
  border-top: 100px solid red;	
  border-right: 100px solid transparent;	
}

10. 右上角

640?wx_fmt=png

#triangle-topright {	
  width: 0;	
  height: 0;	
  border-top: 100px solid red;	
  border-left: 100px solid transparent;	
}

11. 左下角

640?wx_fmt=png

#triangle-bottomleft {	
  width: 0;	
  height: 0;	
  border-bottom: 100px solid red;	
  border-right: 100px solid transparent;	
}

12. 右下角

640?wx_fmt=png

#triangle-bottomright {	
  width: 0;	
  height: 0;	
  border-bottom: 100px solid red;	
  border-left: 100px solid transparent;	
}

13. 箭头

640?wx_fmt=png

#curvedarrow {	
  position: relative;	
  width: 0;	
  height: 0;	
  border-top: 9px solid transparent;	
  border-right: 9px solid red;	
  transform: rotate(10deg);	
}	
#curvedarrow:after {	
  content: "";	
  position: absolute;	
  border: 0 solid transparent;	
  border-top: 3px solid red;	
  border-radius: 20px 0 0 0;	
  top: -12px;	
  left: -9px;	
  width: 12px;	
  height: 12px;	
  transform: rotate(45deg);	
}

14. 梯形

640?wx_fmt=png

#trapezoid {	
  border-bottom: 100px solid red;	
  border-left: 25px solid transparent;	
  border-right: 25px solid transparent;	
  height: 0;	
  width: 100px;	
}

15. 平行四边形

640?wx_fmt=png

#parallelogram {	
  width: 150px;	
  height: 100px;	
  transform: skew(20deg);	
  background: red;	
}

16. 星星 (6角)

640?wx_fmt=png

#star-six {	
  width: 0;	
  height: 0;	
  border-left: 50px solid transparent;	
  border-right: 50px solid transparent;	
  border-bottom: 100px solid red;	
  position: relative;	
}	
#star-six:after {	
  width: 0;	
  height: 0;	
  border-left: 50px solid transparent;	
  border-right: 50px solid transparent;	
  border-top: 100px solid red;	
  position: absolute;	
  content: "";	
  top: 30px;	
  left: -50px;	
}

17. 星星 (5角)

640?wx_fmt=png

#star-five {	
  margin: 50px 0;	
  position: relative;	
  display: block;	
  color: red;	
  width: 0px;	
  height: 0px;	
  border-right: 100px solid transparent;	
  border-bottom: 70px solid red;	
  border-left: 100px solid transparent;	
  transform: rotate(35deg);	
}	
#star-five:before {	
  border-bottom: 80px solid red;	
  border-left: 30px solid transparent;	
  border-right: 30px solid transparent;	
  position: absolute;	
  height: 0;	
  width: 0;	
  top: -45px;	
  left: -65px;	
  display: block;	
  content: '';	
  transform: rotate(-35deg);	
}	
#star-five:after {	
  position: absolute;	
  display: block;	
  color: red;	
  top: 3px;	
  left: -105px;	
  width: 0px;	
  height: 0px;	
  border-right: 100px solid transparent;	
  border-bottom: 70px solid red;	
  border-left: 100px solid transparent;	
  transform: rotate(-70deg);	
  content: '';	
}

18. 五边形

640?wx_fmt=png

#pentagon {	
  position: relative;	
  width: 54px;	
  box-sizing: content-box;	
  border-width: 50px 18px 0;	
  border-style: solid;	
  border-color: red transparent;	
}	
#pentagon:before {	
  content: "";	
  position: absolute;	
  height: 0;	
  width: 0;	
  top: -85px;	
  left: -18px;	
  border-width: 0 45px 35px;	
  border-style: solid;	
  border-color: transparent transparent red;	
}

19. 六边形

640?wx_fmt=png

#hexagon {	
  width: 100px;	
  height: 55px;	
  background: red;	
  position: relative;	
}	
#hexagon:before {	
  content: "";	
  position: absolute;	
  top: -25px;	
  left: 0;	
  width: 0;	
  height: 0;	
  border-left: 50px solid transparent;	
  border-right: 50px solid transparent;	
  border-bottom: 25px solid red;	
}	
#hexagon:after {	
  content: "";	
  position: absolute;	
  bottom: -25px;	
  left: 0;	
  width: 0;	
  height: 0;	
  border-left: 50px solid transparent;	
  border-right: 50px solid transparent;	
  border-top: 25px solid red;	
}

20. 八边形

640?wx_fmt=png

#octagon {	
  width: 100px;	
  height: 100px;	
  background: red;	
  position: relative;	
}	
#octagon:before {	
  content: "";	
  width: 100px;	
  height: 0;	
  position: absolute;	
  top: 0;	
  left: 0;	
  border-bottom: 29px solid red;	
  border-left: 29px solid #eee;	
  border-right: 29px solid #eee;	
}	
#octagon:after {	
  content: "";	
  width: 100px;	
  height: 0;	
  position: absolute;	
  bottom: 0;	
  left: 0;	
  border-top: 29px solid red;	
  border-left: 29px solid #eee;	
  border-right: 29px solid #eee;	
}  

21. 爱心

640?wx_fmt=png

#heart {	
  position: relative;	
  width: 100px;	
  height: 90px;	
}	
#heart:before,	
#heart:after {	
  position: absolute;	
  content: "";	
  left: 50px;	
  top: 0;	
  width: 50px;	
  height: 80px;	
  background: red;	
  border-radius: 50px 50px 0 0;	
  transform: rotate(-45deg);	
  transform-origin: 0 100%;	
}	
#heart:after {	
  left: 0;	
  transform: rotate(45deg);	
  transform-origin: 100% 100%;	
}

22. 无穷大

640?wx_fmt=png

#infinity {	
  position: relative;	
  width: 212px;	
  height: 100px;	
  box-sizing: content-box;	
}	
#infinity:before,	
#infinity:after {	
  content: "";	
  box-sizing: content-box;	
  position: absolute;	
  top: 0;	
  left: 0;	
  width: 60px;	
  height: 60px;	
  border: 20px solid red;	
  border-radius: 50px 50px 0 50px;	
  transform: rotate(-45deg);	
}	
#infinity:after {	
  left: auto;	
  right: 0;	
  border-radius: 50px 50px 50px 0;	
  transform: rotate(45deg);	
}

23. 菱形

640?wx_fmt=png

#diamond {	
  width: 0;	
  height: 0;	
  border: 50px solid transparent;	
  border-bottom-color: red;	
  position: relative;	
  top: -50px;	
}	
#diamond:after {	
  content: '';	
  position: absolute;	
  left: -50px;	
  top: 50px;	
  width: 0;	
  height: 0;	
  border: 50px solid transparent;	
  border-top-color: red;	
}

24. 钻石

640?wx_fmt=png

#diamond-shield {	
  width: 0;	
  height: 0;	
  border: 50px solid transparent;	
  border-bottom: 20px solid red;	
  position: relative;	
  top: -50px;	
}	
#diamond-shield:after {	
  content: '';	
  position: absolute;	
  left: -50px;	
  top: 20px;	
  width: 0;	
  height: 0;	
  border: 50px solid transparent;	
  border-top: 70px solid red;	
}

25. 钻戒

640?wx_fmt=png

#diamond-narrow {	
  width: 0;	
  height: 0;	
  border: 50px solid transparent;	
  border-bottom: 70px solid red;	
  position: relative;	
  top: -50px;	
}	
#diamond-narrow:after {	
  content: '';	
  position: absolute;	
  left: -50px;	
  top: 70px;	
  width: 0;	
  height: 0;	
  border: 50px solid transparent;	
  border-top: 70px solid red;	
}

26. 钻石2

640?wx_fmt=png

#cut-diamond {	
  border-style: solid;	
  border-color: transparent transparent red transparent;	
  border-width: 0 25px 25px 25px;	
  height: 0;	
  width: 50px;	
  box-sizing: content-box;	
  position: relative;	
  margin: 20px 0 50px 0;	
}	
#cut-diamond:after {	
  content: "";	
  position: absolute;	
  top: 25px;	
  left: -25px;	
  width: 0;	
  height: 0;	
  border-style: solid;	
  border-color: red transparent transparent transparent;	
  border-width: 70px 50px 0 50px;	
}

27. 蛋蛋

640?wx_fmt=png

#egg {	
  display: block;	
  width: 126px;	
  height: 180px;	
  background-color: red;	
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;	
}

28. 吃豆人

640?wx_fmt=png

#pacman {	
  width: 0px;	
  height: 0px;	
  border-right: 60px solid transparent;	
  border-top: 60px solid red;	
  border-left: 60px solid red;	
  border-bottom: 60px solid red;	
  border-top-left-radius: 60px;	
  border-top-right-radius: 60px;	
  border-bottom-left-radius: 60px;	
  border-bottom-right-radius: 60px;	
}

29. 对话泡泡

640?wx_fmt=png

#talkbubble {	
  width: 120px;	
  height: 80px;	
  background: red;	
  position: relative;	
  -moz-border-radius: 10px;	
  -webkit-border-radius: 10px;	
  border-radius: 10px;	
}	
#talkbubble:before {	
  content: "";	
  position: absolute;	
  right: 100%;	
  top: 26px;	
  width: 0;	
  height: 0;	
  border-top: 13px solid transparent;	
  border-right: 26px solid red;	
  border-bottom: 13px solid transparent;	
}

30. 12点 爆发

640?wx_fmt=png

#burst-12 {	
  background: red;	
  width: 80px;	
  height: 80px;	
  position: relative;	
  text-align: center;	
}	
#burst-12:before,	
#burst-12:after {	
  content: "";	
  position: absolute;	
  top: 0;	
  left: 0;	
  height: 80px;	
  width: 80px;	
  background: red;	
}	
#burst-12:before {	
  transform: rotate(30deg);	
}	
#burst-12:after {	
  transform: rotate(60deg);	
}

31. 8点 爆发

640?wx_fmt=png

#burst-8 {	
  background: red;	
  width: 80px;	
  height: 80px;	
  position: relative;	
  text-align: center;	
  transform: rotate(20deg);	
}	
#burst-8:before {	
  content: "";	
  position: absolute;	
  top: 0;	
  left: 0;	
  height: 80px;	
  width: 80px;	
  background: red;	
  transform: rotate(135deg);	
}

32. 太极

640?wx_fmt=png

#yin-yang {	
  width: 96px;	
  box-sizing: content-box;	
  height: 48px;	
  background: #eee;	
  border-color: red;	
  border-style: solid;	
  border-width: 2px 2px 50px 2px;	
  border-radius: 100%;	
  position: relative;	
}	
#yin-yang:before {	
  content: "";	
  position: absolute;	
  top: 50%;	
  left: 0;	
  background: #eee;	
  border: 18px solid red;	
  border-radius: 100%;	
  width: 12px;	
  height: 12px;	
  box-sizing: content-box;	
}	
#yin-yang:after {	
  content: "";	
  position: absolute;	
  top: 50%;	
  left: 50%;	
  background: red;	
  border: 18px solid #eee;	
  border-radius: 100%;	
  width: 12px;	
  height: 12px;	
  box-sizing: content-box;	
}  

33. 徽章丝带

640?wx_fmt=png

#badge-ribbon {	
  position: relative;	
  background: red;	
  height: 100px;	
  width: 100px;	
  border-radius: 50px;	
}	
#badge-ribbon:before,	
#badge-ribbon:after {	
  content: '';	
  position: absolute;	
  border-bottom: 70px solid red;	
  border-left: 40px solid transparent;	
  border-right: 40px solid transparent;	
  top: 70px;	
  left: -10px;	
  transform: rotate(-140deg);	
}	
#badge-ribbon:after {	
  left: auto;	
  right: -10px;	
  transform: rotate(140deg);	
}

34. 太空入侵者（电脑游戏名）

640?wx_fmt=png

#space-invader {	
  box-shadow: 0 0 0 1em red,	
  0 1em 0 1em red,	
  -2.5em 1.5em 0 .5em red,	
  2.5em 1.5em 0 .5em red,	
  -3em -3em 0 0 red,	
  3em -3em 0 0 red,	
  -2em -2em 0 0 red,	
  2em -2em 0 0 red,	
  -3em -1em 0 0 red,	
  -2em -1em 0 0 red,	
  2em -1em 0 0 red,	
  3em -1em 0 0 red,	
  -4em 0 0 0 red,	
  -3em 0 0 0 red,	
  3em 0 0 0 red,	
  4em 0 0 0 red,	
  -5em 1em 0 0 red,	
  -4em 1em 0 0 red,	
  4em 1em 0 0 red,	
  5em 1em 0 0 red,	
  -5em 2em 0 0 red,	
  5em 2em 0 0 red,	
  -5em 3em 0 0 red,	
  -3em 3em 0 0 red,	
  3em 3em 0 0 red,	
  5em 3em 0 0 red,	
  -2em 4em 0 0 red,	
  -1em 4em 0 0 red,	
  1em 4em 0 0 red,	
  2em 4em 0 0 red;	
  background: red;	
  width: 1em;	
  height: 1em;	
  overflow: hidden;	
  margin: 50px 0 70px 65px;	
}

35. 电视

640?wx_fmt=png


	
#tv {	
  position: relative;	
  width: 200px;	
  height: 150px;	
  margin: 20px 0;	
  background: red;	
  border-radius: 50% / 10%;	
  color: white;	
  text-align: center;	
  text-indent: .1em;	
}	
#tv:before {	
  content: '';	
  position: absolute;	
  top: 10%;	
  bottom: 10%;	
  right: -5%;	
  left: -5%;	
  background: inherit;	
  border-radius: 5% / 50%;	
}

36. 雪佛龙

640?wx_fmt=png

#chevron {	
  position: relative;	
  text-align: center;	
  padding: 12px;	
  margin-bottom: 6px;	
  height: 60px;	
  width: 200px;	
}	
#chevron:before {	
  content: '';	
  position: absolute;	
  top: 0;	
  left: 0;	
  height: 100%;	
  width: 51%;	
  background: red;	
  transform: skew(0deg, 6deg);	
}	
#chevron:after {	
  content: '';	
  position: absolute;	
  top: 0;	
  right: 0;	
  height: 100%;	
  width: 50%;	
  background: red;	
  transform: skew(0deg, -6deg);	
}   

37. 放大镜

640?wx_fmt=png

#magnifying-glass {	
  font-size: 10em;	
  display: inline-block;	
  width: 0.4em;	
  box-sizing: content-box;	
  height: 0.4em;	
  border: 0.1em solid red;	
  position: relative;	
  border-radius: 0.35em;	
}	
#magnifying-glass:before {	
  content: "";	
  display: inline-block;	
  position: absolute;	
  right: -0.25em;	
  bottom: -0.1em;	
  border-width: 0;	
  background: red;	
  width: 0.35em;	
  height: 0.08em;	
  transform: rotate(45deg);	
}

38. Facebook图标

640?wx_fmt=png

#facebook-icon {	
  background: red;	
  text-indent: -999em;	
  width: 100px;	
  height: 110px;	
  box-sizing: content-box;	
  border-radius: 5px;	
  position: relative;	
  overflow: hidden;	
  border: 15px solid red;	
  border-bottom: 0;	
}	
#facebook-icon:before {	
  content: "/20";	
  position: absolute;	
  background: red;	
  width: 40px;	
  height: 90px;	
  bottom: -30px;	
  right: -37px;	
  border: 20px solid #eee;	
  border-radius: 25px;	
  box-sizing: content-box;	
}	
#facebook-icon:after {	
  content: "/20";	
  position: absolute;	
  width: 55px;	
  top: 50px;	
  height: 20px;	
  background: #eee;	
  right: 5px;	
  box-sizing: content-box;	
}

39. 月亮

640?wx_fmt=png

#moon {	
  width: 80px;	
  height: 80px;	
  border-radius: 50%;	
  box-shadow: 15px 15px 0 0 red;	
}

40. 旗

640?wx_fmt=png

#flag {	
  width: 110px;	
  height: 56px;	
  box-sizing: content-box;	
  padding-top: 15px;	
  position: relative;	
  background: red;	
  color: white;	
  font-size: 11px;	
  letter-spacing: 0.2em;	
  text-align: center;	
  text-transform: uppercase;	
}	
#flag:after {	
  content: "";	
  position: absolute;	
  left: 0;	
  bottom: 0;	
  width: 0;	
  height: 0;	
  border-bottom: 13px solid #eee;	
  border-left: 55px solid transparent;	
  border-right: 55px solid transparent;	
}

41. 圆锥

640?wx_fmt=png

 #cone {	
  width: 0;	
  height: 0;	
  border-left: 70px solid transparent;	
  border-right: 70px solid transparent;	
  border-top: 100px solid red;	
  border-radius: 50%;	
}

42. 十字架

640?wx_fmt=png

#cross {	
  background: red;	
  height: 100px;	
  position: relative;	
  width: 20px;	
}	
#cross:after {	
  background: red;	
  content: "";	
  height: 20px;	
  left: -40px;	
  position: absolute;	
  top: 40px;	
  width: 100px;	
}

43. 根基

640?wx_fmt=png

#base {	
  background: red;	
  display: inline-block;	
  height: 55px;	
  margin-left: 20px;	
  margin-top: 55px;	
  position: relative;	
  width: 100px;	
}	
#base:before {	
  border-bottom: 35px solid red;	
  border-left: 50px solid transparent;	
  border-right: 50px solid transparent;	
  content: "";	
  height: 0;	
  left: 0;	
  position: absolute;	
  top: -35px;	
  width: 0;	
}

44. 指示器

640?wx_fmt=png

#pointer {	
  width: 200px;	
  height: 40px;	
  position: relative;	
  background: red;	
}	
#pointer:after {	
  content: "";	
  position: absolute;	
  left: 0;	
  bottom: 0;	
  width: 0;	
  height: 0;	
  border-left: 20px solid white;	
  border-top: 20px solid transparent;	
  border-bottom: 20px solid transparent;	
}	
#pointer:before {	
  content: "";	
  position: absolute;	
  right: -20px;	
  bottom: 0;	
  width: 0;	
  height: 0;	
  border-left: 20px solid red;	
  border-top: 20px solid transparent;	
  border-bottom: 20px solid transparent;	
}

45. 锁

640?wx_fmt=png

#lock {	
  font-size: 8px;	
  position: relative;	
  width: 18em;	
  height: 13em;	
  border-radius: 2em;	
  top: 10em;	
  box-sizing: border-box;	
  border: 3.5em solid red;	
  border-right-width: 7.5em;	
  border-left-width: 7.5em;	
  margin: 0 0 6rem 0;	
}	
#lock:before {	
  content: "";	
  box-sizing: border-box;	
  position: absolute;	
  border: 2.5em solid red;	
  width: 14em;	
  height: 12em;	
  left: 50%;	
  margin-left: -7em;	
  top: -12em;	
  border-top-left-radius: 7em;	
  border-top-right-radius: 7em;	
}	
#lock:after {	
  content: "";	
  box-sizing: border-box;	
  position: absolute;	
  border: 1em solid red;	
  width: 5em;	
  height: 8em;	
  border-radius: 2.5em;	
  left: 50%;	
  top: -1em;	
  margin-left: -2.5em;	
}

译文：segmentfault.com/a/1190000018922732原文：https://css-tricks.com/the-shapes-of-css/

推荐阅读

1. 

2. 

3. 

4. 

640?

公众号：Java后端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
不规则形状排列的css菜单导航
06-05
4种不同风格的纯CSS菜单导航
css实现梯形
qq_46595660的博客
08-07 4035
css实现梯形
css3绘制三角形
天下大师傅
07-20 455
以前做类似消息提示框指示方向的这种需求需要css配合图片才能做，现在只需要直接用css3就可以了。 这是运行效果图 这是完整代码 *{margin: 0; padding: 0;} .container{ margin: 0 auto;
css 梯形的三种实现方法
weixin_42371145的博客
11-25 7839
转自：https://blog.csdn.net/ChenXvYuan_001/article/details/85016836 https://www.cnblogs.com/linsinan/p/6928734.html 1 利用border加粗方式 这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。 HTML: <div class="...
css实现一个梯形
sushaning的博客
05-25 5319
尝试用css实现一个梯形标签页 1.通过3D形变来实现 试想在现实的三维世界中旋转一个矩形。由于透视的关系，我们最终看到的二维图像往往就是一个梯形！因此，我们可以在CSS 中用3D 旋转 来模拟出这个效果： .wrap { width: 100%; height: 100%; } .tab { width: 300px; height: 80px; position: relative; margin: 100px auto; font-s
css实现叶子形状loading效果
09-25
主要为大家介绍了css实现叶子形状loading效果的方法,通过修改border-radius的参数实现的该效果,非常具有实用价值,需要的朋友可以参考下
web前端-仿射不变的CSS形状检索.pdf
06-21
web前端-仿射不变的CSS形状检索.pdf
不规则形状背景纯css导航菜单
06-05
纯css实现的背景导航，导航边框多为不规则形状，实现起来困难较大，
css3参考手册值得收藏
05-31
css最新的参考手册，详细的每个属性介绍，值得收藏，一生受用！
【CSS】实现梯形
流萤梦的博客
04-09 2548
简单说一下背景，就是需要实现一个展开收起的按钮。那我第一个想到的方法，可不就是border自己画嘛。
css制作梯形
m0_61246613的博客
04-18 2096
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
CSS实现梯形
最新发布
qq_40421206的博客
12-08 194
1、这是结构代码，实现两个体形盒子对称。2、这是CSS样式代码。
【CSS 画个梯形】
前端-CV全粘工程师
08-24 2138
是CSS的属性之一，用于裁剪元素的形状。它可以通过定义一个具有多边形顶点坐标的值来创建一个多边形的裁剪区域，从而实现元素的非矩形裁剪效果。其中多边形顶点坐标可以按照顺时针或逆时针顺序设置，坐标以百分比或像素为单位。因此，可以根据具体的需求选择不同的裁剪方式。还支持其他的形状裁剪方式，例如。
使用css制作一个梯形和三角形
CQXXTXX的博客
11-10 589
使用css制作一个梯形和三角形
【前端】CSS绘制三角形、梯形
Minf的博客
07-17 850
border 绘制等腰梯形 （在绘制好三角形后如上图，将div内容的宽度设置一下，可得到一个等腰梯形，如对梯形宽度有需求，需注意内容的宽度与边框宽度）border 有宽度后，四角交接处会产生斜线，可根据此原理绘制三角形、等腰梯形、直角梯形等图形。border 绘制三角形 （将div中内容设置为0即宽高为0，可出现4个不同方向三角形）border 绘制直角梯形 （去掉上边框和左边框宽度，添加内容宽度，即可得到直角梯形）CSS 如何用border绘制三角形、等腰梯形、直角梯形。
CSS实现直角梯形
热门推荐
陛下Ya的博客
12-28 1万+
献上效果图： 代码 <div class="box"></div> CSS： .box { width: 300px; height: 0; border-width: 0px 150px 150px 0px; border-style: none solid solid; border-color: transparent transparent rgba(255, 0, 0, 1); } 解析： 1、放置一个div并为其加上border div： <div
css将一个div旋转45度
03-28
要将一个div元素旋转45度，可以使用以下CSS代码： ``` div { transform: rotate(45deg); } ``` 在上面的代码中，transform属性用于旋转元素。rotate()函数用于指定要旋转的角度。这里的角度为45度。可以根据需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值