CSS 無圖片技術總結

預覽

動態移動邊框

<!-- more -->

鋸齒邊框 - background

首先咱們重複135度的透明背景，能夠獲得下面的
<div class="demo-jagged-border-half"></div>

.demo-jagged-border-half {
  background-image: linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: top left, top left;
  background-size: 80px 80px;
  background-repeat: repeat-x;
  
  background-color: yellowgreen;
  height: 300px;
}

再加一個反角度的秀景背景
<div class="demo-jagged-border-half demo-jagged-border-half-2"></div>

.demo-jagged-border-half-2 {
  background-image: linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(225deg, #fff 50%, transparent 50%);
}

完整的鋸齒邊框效果
<p data-height="265" data-theme-id="0" data-slug-hash="mJBWPG" data-default-tab="css,result" data-user="yangg" data-embed-version="2" class="codepen">See the Pen CSS saw-tooth borders by Brook Yang (@yangg) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

更多背景效果

• gingham

• polka-dot

• checkerboard

• 動態移動邊框
  查看 demo

CSS 三角形 - border

<div class="demo-triangle"></div>

.demo-triangle {
  border: 50px solid;
  border-color: tomato orange blue purple;
  height: 0;
  width: 0;
}

從上面的圖能夠看出 css 的各邊框是三角形，若是隻設置下邊框就能夠獲得三角形了。
<div class="demo-triangle-top"></div>

.demo-triangle-top {
  border-bottom: 50px solid purple;
  border-left: 50px solid transparent; /* 設置左右邊框透明來撐開三角形的寬度 */
  border-right: 50px solid transparent;
  height: 0;
  width: 0;
}

調整各邊框的寬度能夠獲得更多下面這種形狀

小箭頭 - transform

在移動端（不須要兼容IE8）咱們能夠 rotate一個設置了上和右的邊框（也能夠設置其它兩邊或者旋轉不一樣角度，來獲得不一樣方向的箭頭），來實現下面這種更多的箭頭
<div>
查看更多
</div>

.demo-more-link::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border: solid 1px #aaa;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}

再加上 border-radius 也能夠作出下面這種圓角箭頭按鈕

Image Placeholder - :before

見另外一篇文章 {% post_link "css-none-image-loading-error" %}

投影效果 - :before + box-shadow

See CSS drop-shadows without images

原文地址：http://uedsky.com/2016-05/css-no-image/獲取最佳閱讀體驗並參與討論，請訪問原文