关闭

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

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

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用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

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

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

纯CSS实现两个球相交的粘粘效果

这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了)。

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

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

js实现拖拽效果

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

以轮播效果为案例谈如何写优质代码

作为程序员大家在写代码时谈的最多的就是代码的拓展性、复用性。本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践。文章分三个步骤。第一步,实现基本功能

css实现中间文字,两边横线效果

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

bubbly-bg.js漂亮的动态气泡背景效果

bubbly-bg.js是一款漂亮的动态气泡背景js插件。它是基于HTML5 canvas,压缩后的版本小于1kb,但是它能制作出各种漂亮的动态气泡背景效果,非常强大。

CSS 搞怪的 text-decoration

今天在改一个项目的时候却遇到了一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了,通常会用在移除超链接的底线、或一些特殊强调的效果里头

js实现放大镜效果

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

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

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

点击更多...

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