sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > 网页中三角切边还半透明,现在的设计师越来越牛,css也要跟上啊

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

作者:xuhongji发布时间:2020-09-19分类:Html浏览:95评论:0


导读:需求今天在群里看到一个需求,啊这种三角形缺角怎么做啊,还带半透明阴影的。分析要实现这个,可以用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;
}

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

实现

  

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


欢迎 发表评论:

Html排行
«   2021年1月   »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
网站分类
文章归档
最近发表
推荐文章