星空网 > 软件开发 > 网页设计

网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊

需求

 

今天在群里看到一个需求,啊这种三角形缺角怎么做啊,还带半透明阴影的。

网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊

 

 

分析

要实现这个,可以用css做三角,网上找一下代码,像这样。

网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊

 

由于以前没有试过border能不能带透明,所以需要试验一下。

那么去试验下,red能不能用rgba去替换,如果可以的话那就成功一半了。

 

简单试验下,居然可以。

 

.sanjiao
{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid rgba(0,0,0,.5);
border-left: 100px solid transparent;
}

 

 

网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊

 

那么接下来就是在阴影的三角里插入一个白色的略小一点的三角就可以了。

 

实现

网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊

 

<div >	<div >		<div >		</div>	</div></div><style>	.sanjiao	{		position: relative;		width: 0;		height: 0;		border-bottom: 100px solid rgba(0,0,0,.5);		border-left: 100px solid transparent;	}	.sanjiaobai	{		position: absolute;		right: 0;		top: 20px;		width: 0;		height: 0;		border-bottom: 80px solid #fff;		border-left: 80px solid transparent;	}</style>

  

 至此就完成了这个缺角还带阴影的div了,至于右侧填充一个白色的div,还有下面正常矩形div就不再这里实现了。

 




原标题:网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流