{"id":8386,"date":"2019-01-14T00:44:14","date_gmt":"2019-01-13T16:44:14","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8386"},"modified":"2019-01-14T00:44:14","modified_gmt":"2019-01-13T16:44:14","slug":"pure-css-shapes","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2019\/01\/pure-css-shapes\/","title":{"rendered":"\u5e38\u89c1\u7684CSS\u56fe\u5f62\u7ed8\u5236\u5408\u96c6"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8386\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=8386<\/a><br \/>\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u65e0\u9700\u6388\u6743\uff0c\u53ea\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\u5373\u53ef\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201901\/css-shape-thumb.png\" width=\"484\" height=\"301\" alt=\"CSS\u5360\u4f4d\u56fe\u5206\u4eab\u56fe\" class=\"alignnone clip size-medium\" \/><\/p>\n<p>\u4ee5\u4e0b\u8fd9\u4e9b\u9020\u578b\u7b80\u5355\u7684\u56fe\u5f62\u90fd\u662f\u7eafCSS\u5916\u52a0\u4e00\u4e2aHTML\u6807\u7b7e\u5b9e\u73b0\u7684\uff0c\u4e0d\u5c11\u5b9e\u73b0\u4ee5\u524d\u6211\u4ecb\u7ecd\u8fc7\uff0c\u6216\u8005\u4f60\u4e5f\u77e5\u9053\uff0c\u4f46\u662f\u6709\u4e9b\u76f8\u4fe1\u4f60\u6ca1\u89c1\u8fc7\u3002<\/p>\n<link rel=\"stylesheet\" href=\"\/study\/201901\/shape.css?v2\">\n<h4>1. \u6b63\u65b9\u5f62<\/h4>\n<p>\u5b9e\u65f6\u6e32\u67d3\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"square\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#square {\r\n  width: 100px; height: 100px;\r\n  background: red;\r\n}<\/pre>\n<h4>2. \u957f\u65b9\u5f62<\/h4>\n<p>\u6548\u679c\uff1a<\/p>\n<p id=\"rectangle\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#rectangle {\r\n  width: 200px; height: 100px;\r\n  background: red;\r\n}<\/pre>\n<h4>3. \u6b63\u5706<\/h4>\n<p>\u8fd9\u4e2a\u663e\u7136\u501f\u52a9\u5706\u89d2\u5b9e\u73b0\uff0c\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"circle\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#circle {\r\n  width: 100px; height: 100px;\r\n  background: red;\r\n  border-radius: 50%\r\n}<\/pre>\n<h4>4. \u692d\u5706<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"oval\">\n<p>\u76f8\u6bd4\u6b63\u5706\u5c31\u662f\u5c3a\u5bf8\u6709\u4e9b\u4e0d\u4e00\u6837\uff0c\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#oval {\r\n  width: 200px; height: 100px;\r\n  background: red;\r\n  border-radius: 50%;\r\n}<\/pre>\n<h4>5. \u5411\u4e0a\u4e09\u89d2<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"triangle-up\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#triangle-up {\r\n  width: 0;\r\n  border-left: 50px solid transparent;\r\n  border-right: 50px solid transparent;\r\n  border-bottom: 100px solid red;\r\n}<\/pre>\n<h4>6. \u5411\u4e0b\u4e09\u89d2<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"triangle-down\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#triangle-down {\r\n  width: 0;\r\n  border-left: 50px solid transparent;\r\n  border-right: 50px solid transparent;\r\n  border-top: 100px solid red;\r\n}<\/pre>\n<h4>7. \u65b9\u5411\u671d\u5de6\u7684\u4e09\u89d2<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"triangle-left\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#triangle-left {\r\n  width: 0;\r\n  border-top: 50px solid transparent;\r\n  border-right: 100px solid red;\r\n  border-bottom: 50px solid transparent;\r\n}\r\n<\/pre>\n<h4>8. \u65b9\u5411\u671d\u53f3\u7684\u4e09\u89d2<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"triangle-right\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#triangle-right {\r\n  width: 0;\r\n  border-top: 50px solid transparent;\r\n  border-left: 100px solid red;\r\n  border-bottom: 50px solid transparent;\r\n}<\/pre>\n<h4>9. \u5de6\u4e0a\u4e09\u89d2<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"triangle-topleft\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#triangle-topleft {\r\n  width: 0;\r\n  border-top: 100px solid red;\r\n  border-right: 100px solid transparent;\r\n}<\/pre>\n<p>\u4e5f\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e2a45\u00b0\u7684\u659c\u5411\u7ebf\u6027\u6e10\u53d8\u5b9e\u73b0\uff0c\u4e0d\u8fc7\u517c\u5bb9\u6027\u6ca1\u6709\u4f7f\u7528<code>border<\/code>\u5b9e\u73b0\u597d\u3002<\/p>\n<h4>10. \u53f3\u4e0a\u4e09\u89d2<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"triangle-topright\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#triangle-topright {\r\n  width: 0;\r\n  border-top: 100px solid red;\r\n  border-left: 100px solid transparent;\r\n}<\/pre>\n<p>\u4e5f\u53ef\u4ee5\u4f7f\u7528\u4e00\u4e2a45\u00b0\u7684\u659c\u5411\u7ebf\u6027\u6e10\u53d8\u5b9e\u73b0\uff0c\u4e0d\u8fc7\u517c\u5bb9\u6027\u6ca1\u6709\u4f7f\u7528<code>border<\/code>\u5b9e\u73b0\u597d\u3002<\/p>\n<h4>11. \u5de6\u4e0b\u89d2\u4e09\u89d2\u56fe\u5f62<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"triangle-bottomleft\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#triangle-bottomleft {\r\n  width: 0;\r\n  height: 0;\r\n  border-bottom: 100px solid red;\r\n  border-right: 100px solid transparent;\r\n}<\/pre>\n<p>\u4e5f\u53ef\u4ee5\u4f7f\u7528\u6e10\u53d8\u7ed8\u5236\u3002<\/p>\n<h4>12. \u53f3\u4e0b\u89d2\u4e09\u89d2\u56fe\u5f62<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"triangle-bottomright\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#triangle-bottomright {\r\n  width: 0;\r\n  height: 0;\r\n  border-bottom: 100px solid red;\r\n  border-left: 100px solid transparent;\r\n}<\/pre>\n<p>\u4e5f\u53ef\u4ee5\u4f7f\u7528\u6e10\u53d8\u7ed8\u5236\u3002<\/p>\n<h4>13. \u5f27\u5f62\u5c3e\u7bad\u5934<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"curvedarrow\">\n<p>\u5b8c\u6574CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#curvedarrow {\r\n  position: relative;\r\n  width: 0;\r\n  border-top: 90px solid transparent;\r\n  border-right: 90px solid red;\r\n  transform: rotate(10deg) translateX(100%);\r\n}\r\n#curvedarrow:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  border: 0 solid transparent;\r\n  border-top: 30px solid red;\r\n  border-radius: 200px 0 0 0;\r\n  top: -120px; left: -90px;\r\n  width: 120px; height: 120px;\r\n  transform: rotate(45deg);\r\n}<\/pre>\n<p>\u5b9e\u9645\u4f7f\u7528\u7528\u4e0d\u5230\u8fd9\u4e48\u5927\u7684\u56fe\u5f62\uff0c\u53ea\u8981\u628aCSS\u4e2d\u6240\u6709\u7684\u6570\u503c\uff08\u4e0d\u5305\u62ec\u65cb\u8f6c\uff09\u5168\u90e8\u90fd\u7f29\u5c0f10\u500d\u5c31\u597d\u4e86\u3002<\/p>\n<h4>14. \u68af\u5f62<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"trapezoid\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#trapezoid {\r\n  border-bottom: 100px solid red;\r\n  border-left: 25px solid transparent;\r\n  border-right: 25px solid transparent;\r\n  width: 100px;\r\n}<\/pre>\n<h4>15. \u7b49\u8fb9\u56db\u8fb9\u5f62<\/h4>\n<p>\u9875\u9762\u6e32\u67d3\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"parallelogram\">\n<p>\u53ef\u4ee5\u501f\u52a9transform\u5c5e\u6027\u7684skew\u659c\u5207\u5b9e\u73b0\uff1a<\/p>\n<pre>#parallelogram {\r\n  width: 150px;\r\n  height: 100px;\r\n  transform: skew(20deg);\r\n  background: red;\r\n}<\/pre>\n<h4>16. \u516d\u89d2\u661f<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"star-six\">\n<p>&nbsp;<\/p>\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#star-six {\r\n  width: 0;\r\n  border-left: 50px solid transparent;\r\n  border-right: 50px solid transparent;\r\n  border-bottom: 100px solid red;\r\n  position: relative;\r\n}\r\n#star-six:after {\r\n  border-left: 50px solid transparent;\r\n  border-right: 50px solid transparent;\r\n  border-top: 100px solid red;\r\n  position: absolute;\r\n  content: \"\";\r\n  top: 30px; left: -50px;\r\n}<\/pre>\n<h4>17. \u4e94\u89d2\u661f<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"star-five\">\n<p>\u4e94\u89d2\u661f\u5b9e\u73b0\u96be\u5ea6\u8981\u6bd4\u516d\u89d2\u5f62\u5927\u5f97\u591a\uff0cCSS\u4ee3\u7801\u4e3a\uff1a<\/p>\n<pre>#star-five {\r\n  margin: 50px 0;\r\n  position: relative;\r\n  color: red;\r\n  width: 0px;\r\n  border-right: 100px solid transparent;\r\n  border-bottom: 70px solid red;\r\n  border-left: 100px solid transparent;\r\n  transform: rotate(35deg);\r\n}\r\n#star-five:before {\r\n  border-bottom: 80px solid red;\r\n  border-left: 30px solid transparent;\r\n  border-right: 30px solid transparent;\r\n  position: absolute;\r\n  top: -45px; left: -65px;\r\n  content: '';\r\n  transform: rotate(-35deg);\r\n}\r\n#star-five:after {\r\n  position: absolute;\r\n  color: red;\r\n  top: 3px; left: -105px;\r\n  border-right: 100px solid transparent;\r\n  border-bottom: 70px solid red;\r\n  border-left: 100px solid transparent;\r\n  transform: rotate(-70deg);\r\n  content: '';\r\n}<\/pre>\n<h4>18. \u591a\u8fb9\u5f62-\u4e94\u8fb9\u5f62<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p>&nbsp;<\/p>\n<p id=\"pentagon\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#pentagon {\r\n  position: relative;\r\n  width: 54px;\r\n  box-sizing: content-box;\r\n  border-width: 50px 18px 0;\r\n  border-style: solid;\r\n  border-color: red transparent;\r\n}\r\n#pentagon:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -85px; left: -18px;\r\n  border-width: 0 45px 35px;\r\n  border-style: solid;\r\n  border-color: transparent transparent red;\r\n}<\/pre>\n<p>\u5f53\u7136\uff0c\u6700\u5bb9\u6613\u7406\u89e3\u7684\u5b9e\u73b0\u65b9\u6cd5\u662f<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=4732\">\u4f7f\u7528clip-path<\/a>\u3002<\/p>\n<h4>19. \u591a\u8fb9\u5f62-\u516d\u8fb9\u5f62<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p>&nbsp;<\/p>\n<p id=\"hexagon\">\n<p>&nbsp;<\/p>\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#hexagon {\r\n  width: 100px; height: 55px;\r\n  background: red;\r\n  position: relative;\r\n}\r\n#hexagon:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -25px; left: 0;\r\n  border-left: 50px solid transparent;\r\n  border-right: 50px solid transparent;\r\n  border-bottom: 25px solid red;\r\n}\r\n#hexagon:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: -25px; left: 0;\r\n  border-left: 50px solid transparent;\r\n  border-right: 50px solid transparent;\r\n  border-top: 25px solid red;\r\n}<\/pre>\n<h4>20. \u591a\u8fb9\u5f62-\u516b\u8fb9\u5f62<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"octagon\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#octagon {\r\n  width: 100px;\r\n  height: 100px;\r\n  background: red;\r\n  position: relative;\r\n}\r\n#octagon:before {\r\n  content: \"\";\r\n  width: 100px;\r\n  position: absolute;\r\n  top: 0; left: 0;\r\n  border-bottom: 29px solid red;\r\n  border-left: 29px solid #fff;\r\n  border-right: 29px solid #fff;\r\n  box-sizing: border-box;\r\n}\r\n#octagon:after {\r\n  content: \"\";\r\n  width: 100px;\r\n  position: absolute;\r\n  bottom: 0; left: 0;\r\n  border-top: 29px solid red;\r\n  border-left: 29px solid #fff;\r\n  border-right: 29px solid #fff;\r\n  box-sizing: border-box;\r\n} <\/pre>\n<h4>21. \u7231\u5fc3\u2765<\/h4>\n<p>\u5b9e\u73b0\u540e\u7684\u7231\u5fc3\u6548\u679c\uff1a<\/p>\n<p id=\"heart\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#heart {\r\n  position: relative;\r\n  width: 100px; height: 90px;\r\n}\r\n#heart:before,\r\n#heart:after {\r\n  position: absolute;\r\n  content: \"\";\r\n  left: 50px; top: 0;\r\n  width: 50px; height: 80px;\r\n  background: red;\r\n  border-radius: 50px 50px 0 0;\r\n  transform: rotate(-45deg);\r\n  transform-origin: 0 100%;\r\n}\r\n#heart:after {\r\n  left: 0;\r\n  transform: rotate(45deg);\r\n  transform-origin: 100% 100%;\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u4f5c\u8005\u662f<a href=\"http:\/\/nicolasgallagher.com\/\" rel=\"noopener nofollow\" target=\"_blank\">Nicolas Gallagher<\/a>.<\/p>\n<h4>22. \u65e0\u9650<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"infinity\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#infinity {\r\n  position: relative;\r\n  width: 212px; height: 100px;\r\n  box-sizing: content-box;\r\n}\r\n#infinity:before,\r\n#infinity:after {\r\n  content: \"\";\r\n  box-sizing: content-box;\r\n  position: absolute;\r\n  top: 0; left: 0;\r\n  width: 60px; height: 60px;\r\n  border: 20px solid red;\r\n  border-radius: 50px 50px 0 50px;\r\n  transform: rotate(-45deg);\r\n}\r\n#infinity:after {\r\n  left: auto; right: 0;\r\n  border-radius: 50px 50px 50px 0;\r\n  transform: rotate(45deg);\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u4f5c\u8005\u662f<a href=\"http:\/\/nicolasgallagher.com\/\" rel=\"noopener nofollow\" target=\"_blank\">Nicolas Gallagher<\/a>.<\/p>\n<h4>23. \u83f1\u5f62\u65b9\u5757<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"diamond\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#diamond {\r\n  width: 0;\r\n  height: 0;\r\n  border: 50px solid transparent;\r\n  border-bottom-color: red;\r\n  position: relative;\r\n  top: -50px;\r\n}\r\n#diamond:after {\r\n  content: '';\r\n  position: absolute;\r\n  left: -50px;\r\n  top: 50px;\r\n  width: 0;\r\n  height: 0;\r\n  border: 50px solid transparent;\r\n  border-top-color: red;\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u4f5c\u8005\u662f<a href=\"http:\/\/josephsilber.com\/\" rel=\"noopener nofollow\" target=\"_blank\">Joseph Silber<\/a>.<\/p>\n<h4>24. \u83f1\u5f62\u76fe\u6784<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"diamond-shield\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#diamond-shield {\r\n  width: 0;\r\n  border: 50px solid transparent;\r\n  border-bottom: 20px solid red;\r\n  position: relative;\r\n  top: -50px;\r\n}\r\n#diamond-shield:after {\r\n  content: '';\r\n  position: absolute;\r\n  left: -50px; top: 20px;\r\n  border: 50px solid transparent;\r\n  border-top: 70px solid red;\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u4f5c\u8005\u662f<a href=\"http:\/\/josephsilber.com\/\" rel=\"noopener nofollow\" target=\"_blank\">Joseph Silber<\/a>.<\/p>\n<h4>25. \u65b9\u5757\u83f1\u5f62-\u7a84<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"diamond-narrow\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#diamond-narrow {\r\n  width: 0;\r\n  border: 50px solid transparent;\r\n  border-bottom: 70px solid red;\r\n  position: relative;\r\n  top: -50px;\r\n}\r\n#diamond-narrow:after {\r\n  content: '';\r\n  position: absolute;\r\n  left: -50px; top: 70px;\r\n  border: 50px solid transparent;\r\n  border-top: 70px solid red;\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u4f5c\u8005\u662f<a href=\"http:\/\/josephsilber.com\/\" rel=\"noopener nofollow\" target=\"_blank\">Joseph Silber<\/a>.<\/p>\n<h4>26. \u5207\u5272\u83f1\u5f62-\u94bb\u77f3\u822c<\/h4>\n<p>\u5b66\u4f1a\u4e86\u8fd9\u4e2a\uff0c\u6c42\u5a5a\u65f6\u5019\u76f4\u63a5\u5199\u51e0\u884cCSS\u9001\u7ed9\u5973\u670b\u53cb\u5c31\u597d\u4e86\uff0c\u53ef\u4ee5\u7701\u5f88\u591a\u94b1\u3002<\/p>\n<p id=\"cut-diamond\">\n<p>&nbsp;<\/p>\n<p>\u503c\u94b1\u7684CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#cut-diamond {\r\n  border-style: solid;\r\n  border-color: transparent transparent red transparent;\r\n  border-width: 0 25px 25px 25px;\r\n  width: 50px;\r\n  box-sizing: content-box;\r\n  position: relative;\r\n  margin: 20px 0 50px 0;\r\n}\r\n#cut-diamond:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 25px; left: -25px;\r\n  border-style: solid;\r\n  border-color: red transparent transparent transparent;\r\n  border-width: 70px 50px 0 50px;\r\n}<\/pre>\n<h4>27. \u9e21\u86cb\u5f62\u72b6<\/h4>\n<p>\u6548\u679c\u4e0d\u9519\uff1a<\/p>\n<p id=\"egg\">\n<p>\u5b9e\u73b0\u4e5f\u5f88\u7b80\u5355\uff0c\u5c31<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2015\/11\/css3-border-radius-tips\/\">\u4e00\u4e2aborder-radius\u5c31\u53ef\u4ee5<\/a>\u4e86\uff1a<\/p>\n<pre>#egg {\r\n  display: block;\r\n  width: 126px;\r\n  height: 180px;\r\n  background-color: red;\r\n  border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;\r\n}<\/pre>\n<h4>28. \u5403\u8c46\u4eba<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"pacman\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#pacman {\r\n  width: 0px; height: 0px;\r\n  border-right: 60px solid transparent;\r\n  border-top: 60px solid red;\r\n  border-left: 60px solid red;\r\n  border-bottom: 60px solid red;\r\n  border-top-left-radius: 60px;\r\n  border-top-right-radius: 60px;\r\n  border-bottom-left-radius: 60px;\r\n  border-bottom-right-radius: 60px;\r\n}<\/pre>\n<h4>29. \u5e26\u5c16\u89d2\u7684\u8bf4\u8bdd\u6ce1\u6ce1<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"talkbubble\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#talkbubble {\r\n  width: 120px; height: 80px;\r\n  background: red;\r\n  position: relative;\r\n  border-radius: 10px;\r\n}\r\n#talkbubble:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  right: 100%; top: 26px;\r\n  border-top: 13px solid transparent;\r\n  border-right: 26px solid red;\r\n  border-bottom: 13px solid transparent;\r\n}<\/pre>\n<h4>30. \u5341\u4e8c\u661f<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"burst-12\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#burst-12 {\r\n  background: red;\r\n  width: 80px;\r\n  height: 80px;\r\n  position: relative;\r\n  text-align: center;\r\n}\r\n#burst-12:before,\r\n#burst-12:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  height: 80px;\r\n  width: 80px;\r\n  background: red;\r\n}\r\n#burst-12:before {\r\n  transform: rotate(30deg);\r\n}\r\n#burst-12:after {\r\n  transform: rotate(60deg);\r\n}<\/pre>\n<p>\u8fd9\u4e2a\u6548\u679c\u7684\u4f5c\u8005\u662f<a href=\"http:\/\/commondream.net\/post\/8848553728\/pure-css-badges\" rel=\"noopener nofollow\" target=\"_blank\">Alan Johnson<\/a>\u3002<\/p>\n<h4>31. \u516b\u89d2\u5f62<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"burst-8\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#burst-8 {\r\n  background: red;\r\n  width: 80px; height: 80px;\r\n  position: relative;\r\n  text-align: center;\r\n  transform: rotate(20deg);\r\n}\r\n#burst-8:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0; left: 0;\r\n  height: 80px; width: 80px;\r\n  background: red;\r\n  transform: rotate(135deg);\r\n}<\/pre>\n<p>\u8fd9\u4e2a\u6548\u679c\u7684\u4f5c\u8005\u662f<a href=\"http:\/\/commondream.net\/post\/8848553728\/pure-css-badges\" rel=\"noopener nofollow\" target=\"_blank\">Alan Johnson<\/a>\u3002<\/p>\n<h4>32. \u9634\u9633\u516b\u5366<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"yin-yang\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#yin-yang {\r\n  width: 96px; height: 48px;\r\n  background: #eee;\r\n  border-color: red;\r\n  border-style: solid;\r\n  border-width: 2px 2px 50px 2px;\r\n  border-radius: 100%;\r\n  position: relative;\r\n}\r\n#yin-yang:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 50%; left: 0;\r\n  background: #fff;\r\n  border: 18px solid red;\r\n  border-radius: 100%;\r\n  width: 12px; height: 12px;\r\n}\r\n#yin-yang:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  background: red;\r\n  border: 18px solid #eee;\r\n  border-radius: 100%;\r\n  width: 12px;\r\n  height: 12px;\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u4f5c\u8005\u662fAlexander Futekov\u3002<\/p>\n<h4>33. \u5fbd\u7ae0\u7f0e\u5e26<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"badge-ribbon\">\n<p>&nbsp;<\/p>\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#badge-ribbon {\r\n  position: relative;\r\n  background: red;\r\n  height: 100px; width: 100px;\r\n  border-radius: 50px;\r\n}\r\n#badge-ribbon::before,\r\n#badge-ribbon::after {\r\n  content: '';\r\n  position: absolute;\r\n  border-bottom: 70px solid red;\r\n  border-left: 40px solid transparent;\r\n  border-right: 40px solid transparent;\r\n  top: 70px; left: -10px;\r\n  transform: rotate(-140deg);\r\n}\r\n#badge-ribbon::after {\r\n  left: auto;\r\n  right: -10px;\r\n  transform: rotate(140deg);\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u4f5c\u8005\u662f<a href=\"http:\/\/www.red-team-design.com\/\" rel=\"noopener nofollow\" target=\"_blank\">Catalin Rosu<\/a>\u3002<\/p>\n<h4>34. bilibili\u7535\u89c6\u673a<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"tv\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#tv {\r\n  position: relative;\r\n  width: 200px; height: 150px;\r\n  margin: 20px 0;\r\n  background: red;\r\n  border-radius: 50% \/ 10%;\r\n  color: white;\r\n  text-align: center;\r\n  text-indent: .1em;\r\n}\r\n#tv:before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 10%; bottom: 10%; right: -5%; left: -5%;\r\n  background: inherit;\r\n  border-radius: 5% \/ 50%;\r\n}<\/pre>\n<h4>35. V\u5f62\u7ebf\u6761<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"chevron\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#chevron {\r\n  position: relative;\r\n  text-align: center;\r\n  padding: 12px;\r\n  margin-bottom: 6px;\r\n  height: 60px; width: 200px;\r\n}\r\n#chevron:before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; left: 0;\r\n  height: 100%; width: 51%;\r\n  background: red;\r\n  transform: skew(0deg, 6deg);\r\n}\r\n#chevron:after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0; right: 0;\r\n  height: 100%; width: 50%;\r\n  background: red;\r\n  transform: skew(0deg, -6deg);\r\n}<\/pre>\n<h4>36. \u653e\u5927\u955c<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"magnifying-glass\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#magnifying-glass {\r\n  font-size: 10em;\r\n  display: inline-block;\r\n  width: 0.4em; height: 0.4em;\r\n  border: 0.1em solid red;\r\n  position: relative;\r\n  border-radius: 0.35em;\r\n}\r\n#magnifying-glass:before {\r\n  content: \"\";\r\n  display: inline-block;\r\n  position: absolute;\r\n  right: -0.25em; bottom: -0.1em;\r\n  border-width: 0;\r\n  background: red;\r\n  width: 0.35em; height: 0.08em;\r\n  transform: rotate(45deg);\r\n}<\/pre>\n<p>\u8fd9\u4e2a\u5b9e\u73b0\u5f88\u4e0d\u9519\uff0c\u5355\u4f4d\u662f<code>em<\/code>\uff0c\u5b9e\u7528\u6027\u5c31\u5f88\u5f3a\u3002<\/p>\n<h4>37. \u6708\u513f\u5f2f\u5f2f<\/h4>\n<p>\u6708\u513f\u5f2f\u5f2f\u7167\u4e5d\u5dde\uff1a<\/p>\n<p id=\"moon\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#moon {\r\n  width: 80px; height: 80px;\r\n  border-radius: 50%;\r\n  box-shadow: 15px 15px 0 0 red;\r\n}<\/pre>\n<h4>38. \u65d7\u5e1c<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"flag\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#flag {\r\n  width: 110px; height: 56px;\r\n  padding-top: 15px;\r\n  position: relative;\r\n  background: red;\r\n}\r\n#flag:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0; bottom: 0;\r\n  border-bottom: 13px solid #fff;\r\n  border-left: 55px solid transparent;\r\n  border-right: 55px solid transparent;\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u5b9e\u73b0\u7684\u4f5c\u8005\u662f<a href=\"http:\/\/codepen.io\/zoerooney\/pen\/xIoCn\" rel=\"noopener nofollow\" target=\"_blank\">Zoe Rooney<\/a>.<\/p>\n<h4>39. \u5706\u9525\u4f53<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"cone\">\n<p>\u4f9d\u7136\u662f\u6d3b\u7528<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2015\/11\/css3-border-radius-tips\/\">\u5706\u89d2border-radius\u5c5e\u6027<\/a>\uff1a<\/p>\n<pre>#cone {\r\n  width: 0; height: 0;\r\n  border-left: 70px solid transparent;\r\n  border-right: 70px solid transparent;\r\n  border-top: 100px solid red;\r\n  border-radius: 50%;\r\n}<\/pre>\n<h4>40. \u5341\u5b57\u67b6<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"cross\" style=\"margin-left: 40px;\">\n<p>\u53ef\u4ee5\u4f5c\u4e3a\u6dfb\u52a0\u6309\u94ae\uff0c\u6216\u8005\u6dfb\u52a0\u56fe\u6807\u3002<\/p>\n<p>\u76f8\u5173\u4ee3\u7801\uff1a<\/p>\n<pre>#cross {\r\n  background: red;\r\n  width: 20px; height: 100px;\r\n  position: relative;\r\n}\r\n#cross:after {\r\n  background: red;\r\n  content: \"\";\r\n  width: 100px; height: 20px;\r\n  position: absolute;\r\n  left: -40px; top: 40px;\r\n}<\/pre>\n<h4>41. \u68d2\u7403\u8e0f\u677f\u5f62\u72b6<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"base\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#base {\r\n  background: red;\r\n  display: inline-block;\r\n  height: 55px; width: 100px;\r\n  margin-left: 20px;\r\n  margin-top: 55px;\r\n  position: relative; \r\n}\r\n#base:before {\r\n  border-bottom: 35px solid red;\r\n  border-left: 50px solid transparent;\r\n  border-right: 50px solid transparent;\r\n  content: \"\";\r\n  left: 0; top: -35px;\r\n  position: absolute;  \r\n}<\/pre>\n<p>\u8fd9\u4e2a\u6548\u679c\u5b9e\u73b0\u7684\u4f5c\u8005\u662f<a href=\"http:\/\/joshrodgers.com\/\" rel=\"noopener nofollow\" target=\"_blank\">Josh Rodgers<\/a>\u3002<\/p>\n<h4>42. \u957f\u957f\u7684\u6307\u5411\u56fe\u5f62<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"pointer\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#pointer {\r\n  width: 200px; height: 40px;\r\n  position: relative;\r\n  background: red;\r\n}\r\n#pointer:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0; bottom: 0;\r\n  border-left: 20px solid white;\r\n  border-top: 20px solid transparent;\r\n  border-bottom: 20px solid transparent;\r\n}\r\n#pointer:before {\r\n  content: \"\";\r\n  position: absolute;\r\n  right: -20px; bottom: 0;\r\n  border-left: 20px solid red;\r\n  border-top: 20px solid transparent;\r\n  border-bottom: 20px solid transparent;\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u5b9e\u73b0\u4f5c\u8005\u662fAmsakanna Freethinker\u3002<\/p>\n<h4>43. \u9501<\/h4>\n<p>\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p id=\"lock\" style=\"transform: scale(0.75);transform-origin: 0 0;\">\n<p>\u76f8\u5173CSS\u4ee3\u7801\uff1a<\/p>\n<pre>#lock {\r\n  font-size: 8px;\r\n  position: relative;\r\n  width: 18em; height: 13em;\r\n  border-radius: 2em;\r\n  top: 10em;\r\n  box-sizing: border-box;\r\n  border: 3.5em solid red;\r\n  border-right-width: 7.5em;\r\n  border-left-width: 7.5em;\r\n  margin: 0 0 6rem 0;\r\n}\r\n#lock:before {\r\n  content: \"\";\r\n  box-sizing: border-box;\r\n  position: absolute;\r\n  border: 2.5em solid red;\r\n  width: 14em; height: 12em;\r\n  left: 50%;\r\n  margin-left: -7em; top: -12em;\r\n  border-top-left-radius: 7em;\r\n  border-top-right-radius: 7em;\r\n}\r\n#lock:after {\r\n  content: \"\";\r\n  box-sizing: border-box;\r\n  position: absolute;\r\n  border: 1em solid red;\r\n  width: 5em; height: 8em;\r\n  border-radius: 2.5em;\r\n  left: 50%; top: -1em;\r\n  margin-left: -2.5em;\r\n}<\/pre>\n<p>\u6b64\u6548\u679c\u5b9e\u73b0\u4f5c\u8005\u662fColin Bate\u3002<\/p>\n<hr>\n<p>\u4ee5\u4e0a\u5c31\u662f\u672c\u6b21CSS\u7ed8\u5236\u56fe\u5f62\u5408\u96c6\u3002<\/p>\n<h4>\u53c2\u8003\u6587\u7ae0<\/h4>\n<p>\u53c2\u8003\u6587\u7ae0\uff1a<a href=\"https:\/\/css-tricks.com\/the-shapes-of-css\/\" rel=\"noopener\" target=\"_blank\">The Shapes of CSS<\/a>\uff0c\u5bf9\u539f\u5b9e\u73b0\u8fdb\u884c\u4e86\u5927\u91cf\u7684\u4f18\u5316\uff0c\u5220\u51cf\u4e86\u5b9e\u7528\u4ef7\u503c\u6709\u9650\u7684\u51e0\u4e2a\u56fe\u6807\u3002<\/p>\n<p>\u672c\u6587\u6240\u6709\u7684\u56fe\u5f62\u5b9e\u73b0\u5df2\u7ecf\u6574\u7406\u5230\u4e86\u4e00\u4e2aCSS\u4e2d\uff0c\u53ef\u4ee5<a href=\"\/study\/201901\/shape.css\" rel=\"noopener\" target=\"_blank\">\u53f3\u952e\u8fd9\u91cc<\/a>\u8fdb\u884c\u4e0b\u8f7d\u3002<\/p>\n<p>\u611f\u8c22\u4f60\u80fd\u591f\u575a\u6301\u9605\u8bfb\u5230\u8fd9\u91cc\uff01<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/emoji\/1f60a.svg\" width=\"20\" height=\"20\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8386\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=8386<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201901\/css-shape-thumb.png\" width=\"161\" height=\"100\" alt=\"CSS\u56fe\u5f62\u7ed8\u5236\u5934\u56fe\" class=\"alignright size-medium\" \/><\/p>\n<p>\u5c55\u793a40\u591a\u4e2a\u5e38\u89c1\u7684\u7eafCSS\u7ed8\u5236\u56fe\u5f62\uff0c\u6548\u679c\u5b9e\u65f6\uff0c\u542b\u6e90\u4ee3\u7801\uff0c\u60f3\u8981\u4ec0\u4e48\u6548\u679c\u76f4\u63a5\u590d\u5236\u7c98\u8d34\u5c31\u597d\u4e86\u3002\u5c31\u7b97\u9879\u76ee\u7528\u4e0d\u5230\uff0c\u770b\u770b\u522b\u4eba\u4ee3\u7801\u600e\u4e48\u5199\u7684\u4e5f\u6709\u52a9\u4e8e\u63d0\u9ad8CSS\u7684\u57fa\u672c\u529f\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[319,366,389,339,1271,287,591,1178,889],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8386"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=8386"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8386\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=8386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=8386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=8386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}