本帖最后由 coral菜菜 于 2018-8-12 17:22 编辑1、伪元素实现带角度的底部边界（倾斜的边界）原理：修改webkit-transform: skewY属性来修改倾斜度（旋转也是一样的道理）.edge--bottom { position: relative; z-index: 1;}.edge--bottom:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1;}.edge--bottom:after { bottom: 0; -webkit-transform: skewY(-1.5deg); -ms-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; -ms-transform-origin: 100%; transform-origin: 100%;}2、伪元素和平移（translate）变换实现的提示框<div class="row"> <a rel="nofollow" rel="noreferrer" href="#" class="btn tooltip top"> <span>TOOLTIP TOP</span> <span class="tooltip-content">Lorem ipsum dolor sit amet</span> </a> </div>.tooltip .tooltip-content::after { background: #05a8ff; content: ""; height: 10px; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 10px;}.tooltip.top .tooltip-content { bottom: calc(100% + 1.5em); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}.tooltip.top .tooltip-content::after { bottom: -5px; left: 50%; margin-left: -5px;}3、CSS3 伪元素构建的文章水印背景h1 { position: relative; margin: 0; font-weight: bold; letter-spacing: -0.05rem; line-height: 1; text-transform: uppercase; z-index: 10;}h1:before { content: "2018/08"; font-family: monospace; font-size: 10rem; position: absolute; top: 2rem; left: -2rem; z-index: 0; line-height: 1; color: rgba(50, 25, 0, 0.1)} |
更多技术资讯可关注：gzitcast