CSS 无图片技术总结

pekonchan 发布于2019-08-30 13:05 / 1800人阅读

摘要：预览动态移动边框锯齿边框首先我们重复度的透明背景，可以得到下面的再加一个反角度的秀景背景完整的锯齿边框效果更多背景效果动态移动边框查看三角形从上面的图可以看出的各边框是三角形，如果只设置下边框就可以得到三角形了。

预览

动态移动边框

锯齿边框 - background

首先我们重复135度的透明背景，可以得到下面的

.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;
}

再加一个反角度的秀景背景

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

完整的锯齿边框效果

See the Pen CSS saw-tooth borders by Brook Yang (@yangg) on CodePen.

更多背景效果

gingham

polka-dot

checkerboard

动态移动边框
查看 demo

CSS 三角形 - border

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

从上面的图可以看出 css 的各边框是三角形，如果只设置下边框就可以得到三角形了。

.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一个设置了上和右的边框（也可以设置其它两边或者旋转不同角度，来得到不同方向的箭头），来实现下面这种更多的箭头

.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/
获取最佳阅读体验并参与讨论，请访问原文

混合云私有云 webrtc 技术总结 php缓存技术总结无图片图片css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115297.html

前端计划——面试题总结-HTML篇

摘要：发生在很久以前的及更老的浏览器向过渡时期。数据始终在同源的请求中携带即使不需要，会在浏览器和服务器间来回传递。存储大小数据大小不能超过。与上面问题相连，比也是明智的选择。表现与结构相分离。两种设计思想是有不同的考虑。前言：吾生也有涯,而知也无涯，以有涯随无涯，殆己————庄子阅读本文前请做好以下心理准备：本系列文章将不定期更新。本系列文章不是很严谨。前端面试之HTML篇 Pa...

2json 2019-08-01 16:08 评论0 收藏0
css学习归纳总结（二）

摘要：子选择器只对直接后代有影响的选择器，而对孙子后代以及多层后代不产生作用。烂透了尽可能使用复合语法糟糕好的避免不必要的重复糟糕好的组织好的代码格式代码的易读性和易维护性成正比。标签与元素标签和p元素有什么区别呢？大多数时候他们表示的是同一样东西，但仍有细微的区别。、等指的是HTML分隔符，而元素则是由一对开始结束标签构成的，用来包含某一些内容子选择器和后代选择器的区别：后代选择器...

KnewOne 2019-08-28 18:00 评论0 收藏0
你知道SVG Sprites是什么吗，还在用css sprite就太low了

摘要：它是基于，由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道，那么元素是什么呢单纯翻译的话，是符号的意思，然我的理解是元素用来定义一个图形模板对象，它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 　　大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，...

fevin 2019-08-30 15:54 评论0 收藏0
简单说 CSS滤镜 filter属性

摘要：解释的滤镜，也就是属性，主要有下面这几个属性值模糊亮度注意值是，图像无变化。超过，变亮，小于，变暗。阴影注意这个与都是在说阴影，但还是有区别的，看下图。简单说通过的滤镜实现火焰效果说明滤镜主要是用来实现图像的各种特殊效果，css的滤镜是很神奇的。解释 css的滤镜，也就是filter属性，主要有下面这几个属性值 blur（模糊） showImg(https:/...

klinson 2019-08-21 17:23 评论0 收藏0
简单说 CSS滤镜 filter属性

摘要：解释的滤镜，也就是属性，主要有下面这几个属性值模糊亮度注意值是，图像无变化。超过，变亮，小于，变暗。阴影注意这个与都是在说阴影，但还是有区别的，看下图。简单说通过的滤镜实现火焰效果说明滤镜主要是用来实现图像的各种特殊效果，css的滤镜是很神奇的。解释 css的滤镜，也就是filter属性，主要有下面这几个属性值 blur（模糊） showImg(https:/...

Half 2019-08-05 17:57 评论0 收藏0