學會這些CSS，不再用切圖！！！

三角形

利用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>

效果以下：