幾個實用的CSS程式碼塊
theme: fancy
持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第8天，點選檢視活動詳情
CSS是一門神奇的語言，用的好可以讓頁面看起來更優雅，用的不好不僅會給自己帶來工作量，也可能會影響頁面的美感。想要把CSS學完，並且牢牢記住，這個還真有點難度。一般常用的我們會寫，因為用的多了，如果是遇到不常用的屬性，估計只能靠“百度”了。本文總結了筆者在實際專案中遇到的CSS問題，感覺有點意思，就記錄下來。
使用css 實現三角形、多邊形等不規則形狀
如果是單純實現一個三角形，特別是等腰三角形，我們可以採用border的方式來實現：
html
div {
margin: 100px auto;
width: 0;
height: 0;
border: 50px solid;
border-color: transparent transparent red;
}
執行結果：
如果我們要實現多邊形，我們可以考慮使用裁剪的方式，裁剪出多邊形的形狀。
clip-path：使用裁剪的方式用於建立元素的可顯示區域。裁剪後，區域內的部分為顯示，區域外的部分則隱藏。clip-path可選的值有很多，例如：
inset()：矩形circle()：圓形ellipse()：橢圓polygon()：多邊形path()：任意形狀
polygon有兩種引數需要傳入，一種是可選的填充規則，省略不傳則為預設值，通常來說不傳；另一種是三對或者更多的座標值，座標值按照笛卡爾座標系，順序為“上右下左”，分別指定每個點的座標，座標採用距離原點的百分比或者具體的px。
html
div {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); // 繪製一個菱形
}
執行結果：
div {
clip-path: polygon(50% 0px, 100% 25%, 75% 100%, 25% 100%, 0px 25%); // 五邊形
}
執行結果：
flex佈局下實現文字省略號展示效果
單個元素如果是flex佈局無法實現省略號的效果，因此至少需要兩層。父元素設定為flex佈局，子元素設定省略號展示。
```html // html
// css / 父元素設定為flex佈局 / .flex{ display: flex; border: 1px solid red; width: 300px; } / 需要省略的元素，需要設定flex:1和min-width:0 / .flex-content { text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; flex: 1; min-width: 0; } ```
執行結果：
實現自定義dash虛線分割線
採用背景圖片漸變的方式
css
// css
.dash {
width: 100%;
height: 30px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 24px 6px;
background-repeat: repeat-x;
}
執行結果：
使用重複性漸變實現分割線
repeating-linear-gradient
```css /
/.repeat { width: 300px; height: 10px; background-image: repeating-linear-gradient( 45deg, #00f 0 10px, transparent 10px 15px, #f00 15px 25px, transparent 25px 30px ); } ```
總結
本文記錄了幾個可能會用到的CSS程式碼塊，下次如果還遇到類似的問題，就不用無腦的百度了，直接複製程式碼即可。
原創不易，轉載請註明出處。