CSS 无图片技术总结

brook

预览

jagged border
动态移动边框
动态移动边框
<!-- 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/
获取最佳阅读体验并参与讨论,请访问原文

阅读 2.7k

前端小站
CSS, javascript, gulp, front end, .etc

Front end developer v.12

3.1k 声望
55 粉丝
0 条评论

Front end developer v.12

3.1k 声望
55 粉丝
文章目录
宣传栏