关闭

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

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

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案

最近使用 vuedraggable 做拖拽效果。不过因为要用到滚动条而使用了 overflow: scroll,导致了两个奇怪的效果,虽然折腾了一段时间,不过最后我还是将这些奇怪的 bug 解决了。

canvas实现刮刮卡效果

最近手机应用和网页都有很多类似刮刮卡抽奖效果,所以我花了点时间来写这个特效,单页面实现刮刮卡效果

CSS如何在页面加载时创建淡入效果?

想要使用CSS在页面加载上创建淡入效果,可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。通过2个关键帧来定义CSS动画:一个不透明度设置为0,另一个不透明度设置为1。

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

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

HTML Canvas如何实现线性渐变效果?

可以先使用HTML Canvas的线性渐变的函数createLinearGradient()来创建一个渐变色线性对象;然后使用addColorStop()方法定义渐变色颜色;最后将渐变颜色分配给strokeStyle或fillStyle属性进行填充

JavaScript写一个简单的Ps滤镜效果

CSS3多了一个filter的属性,非常强大(兼容性一般)!我们只要根据输入的值/滑块滑动的值来动态更改css中filter属性的值即可,写一个过滤属性滑块和输入框,互相绑定值,如果用vue就简单了

CSS实现文字下面波浪线动画效果

就是使用径向渐变绘制我们的波浪线效果,一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以,我们只要使用径向渐变绘制圆弧

Vue实现网页放大镜效果

组件使用less,请确保已安装loader,本组件为放大镜组件,传参列表为:width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍,picList:必传,传入图片列表

css3的transform:tanslateZ没有效果

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

js实现拖拽效果

定义全局变量用于接收鼠标坐标的变量,事件的执行函数,事件的执行函数自带参数e。自带参数e注意:div元素要设置定位才可以进行移动。

点击更多...

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