CSS渲染切角效果
摘要:CSS渲染切角效果作者：请叫我二狗哥切角是一种非常流行的设计风格，切角效果常用于按钮或者导航应用中。CSS中通过线性渐变的色标设置以及一些基本的勾股定理数学计算，就可以实现如如图1所示的切角渲染。（背景颜色#2eb1f）图1切角效果就是通过线性渐变覆盖掉矩形的三角形部分实现切角效果。由于箭头为90°直角，即剪切的两个线性渐变构成的白色三角形是等腰直角三角形。重点在于线性渐变中渐变线白色色标的最小长度。根据勾股定理，其最小长度为元素高度值一半的√2倍。即√2x=0.5H。其中H为元素的高度值，x为数学理论计算白色渐变色标长度的最小长度值。 <divclass='button'>Next</div>.button{/*外围样式*/display:inline-block;padding:0.5em1.5em.5em1em;width:auto;height:20px;font-weight:bold;color:white;text-align:center;line-height:20px;/*核心样式*/background:#2eb1f;background-image:linear-gradient(225deg,white13px,transparent13px),linear-gradient(-45deg,white13px,transparent13px);border-radius:.3125em00.3125em;}绘制四边切角效果如上图所示的四个切角效果，可以通过四个线性渐变结合透明色色标来实 现。<divclass='ad'>欢迎来到
温馨提示：当前文档最多只能预览
5 页，若文档总页数超出了
5 页，请下载原文档以浏览全部内容。
本文档由 匿名用户 于 2020-11-15 02:51:19上传分享
