三角形
利用border-color支持transparent這一特性，隱藏三條邊框，實作三角形，
<style> .triangle { width: 0; height: 0; border-style: solid; box-sizing: border-box; border-width: 0 10px 10px; border-color: transparent transparent #c5c5c5 transparent; } </style> <div class="triangle"></div>
效果如下：
左上三角形
<style> .left-top-triangle { width: 0; height: 0; border-style: solid; box-sizing: border-box; border-width: 10px; border-color: #c5c5c5 transparent transparent #c5c5c5; } </style> <div class="left-top-triangle"></div>
效果如下：
正五邊形
<style> .pentagon { width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #c5c5c5 transparent; } .pentagon::before { content: ""; position: absolute; width: 0; height: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #c5c5c5; } </style> <div class="pentagon"></div>
效果如下：
氣泡框
使用絕對定位進行三角形覆寫，實作氣泡框突出部分，<style> .bubble-tip { width: 100px; height: 30px; line-height: 30px; margin-left: 10px; border: 1px solid #c5c5c5; border-radius: 4px; position: relative; background-color: #fff; } .bubble-tip::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #ffffff transparent transparent; position: absolute; top: 5px; left: -10px; z-index: 2; } .bubble-tip::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #c5c5c5 transparent transparent; position: absolute; top: 5px; left: -11px; z-index: 1; } </style> <div class="bubble-tip"></div>
效果如下：
卡券貼
在CSS3當中，background添加了background-size屬性，控制背景圖片的大小，配合background-position屬性，可以在一個背景下面展示多張圖片，
卡券貼的核心是使用透明白色徑向漸變radial-gradient，分別讓4張背景圖中的左下角、右下角、右上角和左下角出現預設，再利用drop-shadow實作元素陰影，從而達到效果，
radial-gradient語法如下：
radial-gradient(shape size at position, start-color, ..., last-color)
| 值 | 描述 |
| shape | 確定圓的型別: ellipse (默認): 指定橢圓形的徑向漸變， circle ：指定圓形的徑向漸變 |
| size |
定義漸變的大小，可能值： farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角 closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊 closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角 farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊 |
| position | 定義漸變的位置，可能值： center（默認）：設定中間為徑向漸變圓心的縱坐標值， top：設定頂部為徑向漸變圓心的縱坐標值， bottom：設定底部為徑向漸變圓心的縱坐標值， 可混合使用，如top right |
| start-color, ..., last-color | 用于指定漸變的起止顏色， |
<style> .coupon{ width: 200px; height: 80px; background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 40px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 40px no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 40px no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 40px no-repeat; filter: drop-shadow(3px 3px 3px #c5c5c5); } </style> <div class="coupon"></div>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/27998.html
標籤：Html/Css