大螃嗨

好记性不如烂笔头

您的足迹:

css特殊形状

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

--- css特殊形状 [2020/01/02 02:57] – 创建螃蟹
+++ css特殊形状 [2020/01/02 03:16] (当前版本) – 螃蟹
@@ 行 1: / 行 1: @@
-核心思路是使用伪元素+border
+核心思路是使用[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements|伪元素]]+[[https://developer.mozilla.org/zh-CN/docs/Web/CSS/border|border]]
-通过如下几个例子：
+核心思路是理解border的形状，是梯形。
+分割线以下是详细说明
+------
+以下是HTML代码
 <code html>
 <div >
-                <a className={classes.item} href="#">{item}</a>
+    <a className={classes.item} href="#">{item}</a>
-          </div>
+</div>
+</code>
+以下是JSS代码：
+<code jss>
+item: {
+    display: 'block',
+    float: 'left',
+    height: 50,
+    backgroundColor: '#e8f5e9',
+    padding: '30px 40px 0px 40px',
+    margin: '0px 10px 0px 0px',
+    textAlign: 'center',
+    position: 'relative',
+    fontSize: 20,
+    color: '#4caf50',
+    textDecoration: 'none',
+    '&:after': {
+      content: '""',
+      borderTop: '40px solid red',
+      borderBottom: '40px solid blue',
+      borderLeft: '40px solid yellow',
+      borderRight: '40px solid green',
+      position: 'absolute',
+      right: -40,
+      top: 0,
+    },
+  },
 </code>
-<code css>
+--------
+主要通过如下几个代码片段来说明边框：
+<code jss>
+'&:after': {
+      content: '""',
+      borderTop: '40px solid red',
+      borderBottom: '40px solid blue',
+      borderLeft: '40px solid yellow',
+      borderRight: '40px solid green',
+      position: 'absolute',
+      right: -40,
+      top: 0,
+    },
+</code>
+{{:wiki:css特殊形状1.jpg|}}
+--------
+<code jss>
+'&:after': {
+      content: '"🦀️"',
+      borderTop: '40px solid red',
+      borderBottom: '40px solid blue',
+      borderLeft: '40px solid yellow',
+      borderRight: '40px solid green',
+      position: 'absolute',
+      right: -40,
+      top: 0,
+    },
+</code>
+{{:wiki:css特殊形状2.jpg|}}
+--------
+<code jss>
+'&:after': {
+      content: '"🦀️"',
+      borderTop: '40px solid red',
+      borderBottom: '40px solid blue',
+      borderLeft: '40px solid yellow',
+      position: 'absolute',
+      right: -40,
+      top: 0,
+    },
+</code>
+{{::css特殊形状3.jpg|}}
+--------
+<code jss>
+'&:after': {
+      content: '""',
+      borderTop: '40px solid red',
+      borderBottom: '40px solid blue',
+      borderLeft: '40px solid yellow',
+      position: 'absolute',
+      right: -40,
+      top: 0,
+    },
 </code>
+{{::css特殊形状4.jpg|}}

css特殊形状.1577933822.txt.gz · 最后更改: 2020/01/02 02:57 由螃蟹