{"id":8360,"date":"2019-01-11T11:30:03","date_gmt":"2019-01-11T03:30:03","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8360"},"modified":"2019-01-12T14:26:36","modified_gmt":"2019-01-12T06:26:36","slug":"pure-css-26-letters","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2019\/01\/pure-css-26-letters\/","title":{"rendered":"\u5206\u4eab\u4e09\u4e2a\u7eafCSS\u5b9e\u73b026\u4e2a\u82f1\u6587\u5b57\u6bcd\u7684\u6848\u4f8b"},"content":{"rendered":"

by zhangxinxu<\/a> from https:\/\/www.zhangxinxu.com\/wordpress\/?p=8360<\/a>
\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4e2a\u4eba\u7f51\u7ad9\u65e0\u9700\u6388\u6743\uff0c\u53ea\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\u5373\u53ef\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n\n\n

\u4e00\u3001\u501f\u52a9CSS border\u5b9e\u73b0\u6848\u4f8b<\/h3>\n

\u5b9e\u73b0\u6548\u679c\u5982\u4e0b\uff08\u4e3a\u5b9e\u65f6\u6e32\u67d3\u6548\u679c\uff09\uff1a<\/p>\n

<\/div>\n

\u539f\u4f5c\u8005\u662fjoshnh\uff0c\u51fa\u5904\u662f\u8fd9\u91cc<\/a>\u3002<\/p>\n

\u539f\u4f5c\u8005\u5b9e\u73b0\u7684\u7c7b\u540d\u8fc7\u4e8e\u7b80\u5355\uff0c\u7528\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u5f88\u5bb9\u6613\u51b2\u7a81\uff0c\u6211

\u5982\u4f55\u4f7f\u7528\uff1f<\/h4>\n

\u5f15\u7528CSS\u6587\u4ef6<\/a>\uff0c\u4f8b\u5982\uff1a<\/p>\n

<link rel=\"stylesheet\" href=\".\/css-letters1.css\"><\/pre>\n
\u6216\u8005\u76f4\u63a5CSS\u4ee3\u7801\u5230\u4f60\u7684\u9879\u76ee\u4e2d\uff0c\u7531\u4e8e\u7bc7\u5e45\u8f83\u957f\uff0c\u6211\u8fd9\u91cc\u4ec5\u663e\u793a\u524d\u51e0\u4e2a\u5b57\u6bcd\u7684CSS\u6837\u5f0f\uff0c\u5b8c\u6574CSS\u4ee3\u7801\u89c1\u8fd9\u91cc<\/a>\uff1a<\/p>\n
\/* \u5168\u5c40\u6837\u5f0f *\/<\/span>\r\n.letter {\r\n    color: #2486ff;\r\n    border-style: solid;\r\n    border-width: .5em;\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n.letter:after {\r\n    border-style: solid;\r\n    border-width: .5em;\r\n    content: '';\r\n    position: absolute;\r\n}\r\n\/* \u5355\u4e2a\u5b57\u6bcd\u6837\u5f0f *\/<\/span>\r\n.letter[data-char=\"A\"] {\r\n    border-bottom: none;\r\n    border-radius: 1em 1em 0 0;\r\n    height: 2.05em;\r\n    margin-top: -.05em;\r\n    width: 1em;\r\n}\r\n.letter[data-char=\"A\"]:after {\r\n    border-bottom: none;\r\n    border-left: none;\r\n    border-right: none;\r\n    left: 0;\r\n    right: 0;\r\n    top: .75em;\r\n}\r\n.letter[data-char=\"B\"] {\r\n    border-radius: 0 1em 1em 0;\r\n    height: .5em;\r\n    width: 1em;\r\n}\r\n.letter[data-char=\"B\"]:after {\r\n    border-radius: 0 1em 1em 0;\r\n    bottom: 100%;\r\n    height: .5em;\r\n    left: -.5em;\r\n    width: .9em;    \r\n}\r\n.letter[data-char=\"C\"] {\r\n    border-right: none;\r\n    border-radius: 1em 0 0 1em;\r\n    height: 1.5em;\r\n    width: 1.5em;\r\n}\r\n.letter[data-char=\"C\"]:after {\r\n    border-bottom: none;\r\n    border-left: none;\r\n    border-top: none;\r\n    height: .5em;\r\n    right: 0;\r\n    top: 0;\r\n    width: .5em;\r\n}\r\n...<\/pre>\n
HTML\u90e8\u5206\u5982\u4e0b\uff1a<\/p>\n
<span class=\"letter\" data-char=\"A\"><\/span>\r\n<span class=\"letter\" data-char=\"B\"><\/span>\r\n<span class=\"letter\" data-char=\"C\"><\/span>\r\n<span class=\"letter\" data-char=\"D\"><\/span>\r\n<span class=\"letter\" data-char=\"E\"><\/span>\r\n<span class=\"letter\" data-char=\"F\"><\/span>\r\n<span class=\"letter\" data-char=\"G\"><\/span>\r\n<span class=\"letter\" data-char=\"H\"><\/span>\r\n<span class=\"letter\" data-char=\"I\"><\/span>\r\n<span class=\"letter\" data-char=\"J\"><\/span>\r\n<span class=\"letter\" data-char=\"K\"><\/span>\r\n<span class=\"letter\" data-char=\"L\"><\/span>\r\n<span class=\"letter\" data-char=\"M\"><\/span>\r\n<span class=\"letter\" data-char=\"N\"><\/span>\r\n<span class=\"letter\" data-char=\"O\"><\/span>\r\n<span class=\"letter\" data-char=\"P\"><\/span>\r\n<span class=\"letter\" data-char=\"Q\"><\/span>\r\n<span class=\"letter\" data-char=\"R\"><\/span>\r\n<span class=\"letter\" data-char=\"S\"><\/span>\r\n<span class=\"letter\" data-char=\"T\"><\/span>\r\n<span class=\"letter\" data-char=\"U\"><\/span>\r\n<span class=\"letter\" data-char=\"V\"><\/span>\r\n<span class=\"letter\" data-char=\"W\"><\/span>\r\n<span class=\"letter\" data-char=\"X\"><\/span>\r\n<span class=\"letter\" data-char=\"Y\"><\/span>\r\n<span class=\"letter\" data-char=\"Z\"><\/span><\/pre>\n
\u4e8c\u3001border\u52a0\u5706\u89d2\u4e0e\u53e6\u4e00\u79cd\u98ce\u683c\u5b57\u4f53<\/h3>\n
\u8fd8\u662f\u5148\u770b\u6548\u679c\uff0c\u5b9e\u65f6\u6e32\u67d3\uff0c\u5982\u679c\u6ca1\u6709\u6548\u679c\u53bb\u539f\u6587https:\/\/www.zhangxinxu.com\/wordpress\/?p=8360\u6d4f\u89c8<\/a><\/span>\uff1a<\/p>\n
<\/div>\n
\u539f\u4f5c\u8005\u662fHKK\uff0c\u51fa\u5904\u662f\u8fd9\u91cc<\/a>\u3002<\/p>\n
\u539f\u4f5c\u8005\u5b9e\u73b0\u7684\u5230\u5b57\u6bcdR\u5c31\u622a\u6b62\u4e86\uff0c\u7136\u540e\u6211\u5c31\u82b1\u4e86\u534a\u5c0f\u65f6\u4eff\u7167\u98ce\u683c\u628a\u540e\u9762STUVWXYZ\u8fd9\u4e9b\u5b57\u6bcd\u90fd\u8865\u5168\u4e86\uff0c\u8fd9\u683726\u4e2a\u5b57\u6bcd\u5c31\u4e00\u4e2a\u4e0d\u843d\u4e86\u3002<\/p>\n
\u5982\u4f55\u4f7f\u7528\uff1f<\/h4>\n
\u5f15\u7528CSS\u6587\u4ef6<\/a>\uff0c\u4f8b\u5982\uff1a<\/p>\n
<link rel=\"stylesheet\" href=\".\/css-letters2.css\"><\/pre>\n
\u6216\u8005\u76f4\u63a5\u590d\u5236CSS\u4ee3\u7801\u5230\u4f60\u7684\u9879\u76ee\u4e2d\uff0c\u7531\u4e8e\u7bc7\u5e45\u9650\u5236\uff0c\u6211\u8fd9\u91cc\u4ec5\u663e\u793a\u524d\u51e0\u4e2a\u5b57\u6bcd\u7684CSS\u6837\u5f0f\uff0c\u5b8c\u6574CSS\u4ee3\u7801\u89c1\u8fd9\u91cc<\/a>\uff1a<\/p>\n
.letter-a {\r\n    position: relative;\r\n    width: 30px;\r\n    height: 40px;\r\n    background: white;\r\n    border-radius: 10px 10px 0 0;\r\n    border-style: solid;\r\n    border-color: currentColor currentColor transparent currentColor;\r\n    border-width: 10px 10px 0 10px;\r\n}\r\n.letter-a::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 10px;\r\n    height: 10px;\r\n    width: 30px;\r\n    background: currentColor;\r\n}\r\n\r\n.letter-b {\r\n    position: relative;\r\n    width: 30px;\r\n    height: 30px;\r\n    border-width: 10px 10px 10px  10px;\r\n    border-style: solid;\r\n    border-color: transparent transparent transparent currentColor;\r\n    background: transparent;\r\n}\r\n.letter-b::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: -10px;\r\n    top: -10px;\r\n    height: 10px;\r\n    width: 30px;\r\n    background: transparent;\r\n    border-radius: 0 12.5px 12.5px 0;\r\n    border: 10px solid currentColor;\r\n}\r\n.letter-b::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    left: -10px;\r\n    bottom: -10px;\r\n    height: 10px;\r\n    width: 30px;\r\n    background: transparent;\r\n    border-radius: 0 12.5px 12.5px 0;\r\n    border: 10px solid currentColor;\r\n}\r\n...<\/pre>\n
HTML\u90e8\u5206\u4ee3\u7801\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n
<span class=\"letter-a\"><\/span>\r\n<span class=\"letter-b\"><\/span>\r\n<span class=\"letter-c\"><\/span>\r\n<span class=\"letter-d\"><\/span>\r\n<span class=\"letter-e\"><\/span>\r\n<span class=\"letter-f\"><\/span>\r\n<span class=\"letter-g\"><\/span>\r\n<span class=\"letter-h\"><\/span>\r\n<span class=\"letter-i\"><\/span>\r\n<span class=\"letter-j\"><\/span>\r\n<span class=\"letter-k\"><\/span>\r\n<span class=\"letter-l\"><\/span>\r\n<span class=\"letter-m\"><\/span>\r\n<span class=\"letter-n\"><\/span>\r\n<span class=\"letter-o\"><\/span>\r\n<span class=\"letter-p\"><\/span>\r\n<span class=\"letter-q\"><\/span>\r\n<span class=\"letter-r\"><\/span>\r\n<span class=\"letter-s\"><\/span>\r\n<span class=\"letter-t\"><\/span>\r\n<span class=\"letter-u\"><\/span>\r\n<span class=\"letter-v\"><\/span>\r\n<span class=\"letter-w\"><\/span>\r\n<span class=\"letter-x\"><\/span>\r\n<span class=\"letter-y\"><\/span>\r\n<span class=\"letter-z\"><\/span><\/pre>\n
\u6bcf\u4e2a\u5b57\u6bcd\u90fd\u53ef\u4ee5\u72ec\u7acb\u4f7f\u7528\u3002<\/p>\n
\u4e0d\u8fc7\u8fd9\u91cc\u7684\u5b9e\u73b0\u6709\u4e2a\u4e0d\u597d\u7684\u662f\uff0c\u8fd9\u91cc\u7684\u5b57\u6bcd\u90fd\u662f\u4f7f\u7528px\u5355\u4f4d\u5b9e\u73b0\u7684\uff0c\u56e0\u6b64\uff0c\u60f3\u8981\u81ea\u5982\u63a7\u5236\u5b57\u6bcd\u7684\u5927\u5c0f\u4e0d\u592a\u65b9\u4fbf\u3002\u9700\u8981\u501f\u52a9transform\u8fdb\u884c\u7f29\u653e\u63a7\u5236\u624d\u884c\u3002<\/p>\n