css3 斜切角/斜边的实现方式

时间: 2018-04-25阅读: 19565标签: 效果

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。


1、方案一:利用linear-gradient

.chamfer{
    background: #3b3; 
    background: linear-gradient(135deg, transparent 15px, #3b3 0) top left, 
			linear-gradient(-135deg, transparent 15px, #3b3 0) top right, 
			linear-gradient(-45deg, transparent 15px, #3b3 0) bottom right, 
			linear-gradient(45deg, transparent 15px, #3b3 0) bottom left; 	
    background-size: 50% 50%; 
    background-repeat: no-repeat;
}
</style>
<div class="chamfer" ></div>

效果如下:



2、方案二:利用clip-path

<style>
.base{
	width: 300px;height: 300px;
}	
.chamfer{
	background: #009EEB; 
       clip-path: polygon( 20px 0, calc(100% - 20px) 0, 100% 20px, 
			100% calc(100% - 20px), calc(100% - 20px) 100%, 
			20px 100%, 
			0 calc(100% - 20px), 
			0 20px
   		);
}
</style>
<div class="chamfer"></div>

效果如下:


css曲线切口角的实现 

上面实现的2种切口是直线的,如何实现曲线切口角呢?下面就介绍利用radial-gradient实现曲线切口角:

<style>
.chamfer{
	background: #e72; 
        background: radial-gradient(circle at top left, transparent 15px, #e72 0) top left, 
			    radial-gradient(circle at top right, transparent 15px, #e72 0) top right, 
			    radial-gradient(circle at bottom right, transparent 15px,#e72 0) bottom right,
			    radial-gradient(circle at bottom left, transparent 15px, #e72 0) bottom left;
	background-size: 50% 50%; 
	background-repeat: no-repeat;
}
</style>
<div class="chamfer"></div>

效果如下:


使用Corner-shape

除了上面写的方法外,我们还可以使用插件Corner-shape来实现,Corner-shape这个插件很有意思,能够生成元素的角形状,比如圆角、反向圆角、矩形、直角的边角,使用SVG技术生成,使用上只需要设置预设的自定义属性,然后设置圆角边框的大小即可。 Corner-shape的使用链接:http://wenjiangs.com/wp-content/uploads/2017/06/corner-shape/

 例如:

corner-shape:bevel;
border-radius:10% / 30px;
width:400px;
height: 300px;



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/714

CSS实现无外边框列表效果

使用外层容器切割:给每一个 li 设定右边框和下边框线,使用CSS选择器此方法仅适用于每行固定显示两个li的情况,不需要计算宽高,也不需要设置父容器。使用table通过CSS选择器li:nth-last-child(2)和li:last-child隐藏最后两个li的下边框

vue2实现带地区编号和名称的省市县三级联动效果

我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果。

position: sticky实现导航栏下滑吸顶效果

近期开发中遇到导航栏下滑吸顶的需求,经过方案调研,发现position:sticky可以简单快捷的实现功能。sticky(粘贴定位)可以被认为是相对定位和固定定位的混合,元素在跨越特定阀值前为相对定位

CSS :placeholder-shown伪类实现输入框浮动文字效果

当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的:label标签是关联表单元素,提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在<input>元素内的文本

CSS实现雨滴动画效果

今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果

css3的transform:tanslateZ没有效果

关于css动画tansform:translateZ(100PX)没有效果的记录,之前学习cs3动画就学的迷迷糊糊的,这次项目中刚好用到了cs3动画,遇到了一个问题,记录下来,方便后期查阅

纯css实现彩虹效果

实现思路:使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起;after伪元素写投影样式;彩虹和投影都有动画,用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式

Js实现时钟效果

在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

css 遮照镂空效果

一:最简单最粗暴的方法!截图!二:利用css3的阴影效果。三:利用css的边框属性。四:最麻烦的一个,利用canvas的绘图功能。五:遮罩层加box

js实现放大镜效果

使用电脑逛淘宝,京东等商城时,将鼠标移入图片中,图片会放大,之前一直在想这种是怎么实现的,前两天刚写出来,纯js实现的,无任何工具库。下面先来看下思路吧!刚学js的时候可能对于布局不是很重要

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!