本站消息
使用 CSS 制作圆角三角形
发布于2022-07-05 02:28 阅读(678) 评论(0) 点赞(18) 收藏(1)
我一直在尝试在页面的左下角和右上角创建这个形状。不幸的是，我无法创建所需的外观，我能够实现的最接近的是具有以下代码的饼形：
<style>
/* css code that will create, color, and shape
the first accent color area */
#colorAreaOne{
width: 700px;
height: 700px;
background: #3333ff;
opacity: 0.8;
border-radius: 0 700px 0 0;
-moz-border-radius: 0 700px 0 0;
-webkit-border-radius: 0 700px 0 0;
position: fixed;
bottom: 0px;
left: 0px;
}
/* css code that will create, color, and shape
the second accent color area */
#colorAreaTwo{
width: 700px;
height: 700px;
background: #3333ff;
opacity: 0.8;
border-radius: 0 0 700px; 0;
-moz-border-radius: 0 0 700px 0;
-webkit-border-radius: 0 0 700px 0;
position: fixed;
top: 0px;
right: 0px;
}
</style>
如果有人有任何信息，将不胜感激。谢谢！
解决方案
径向渐变
div {
width: 700px;
height: 700px;
margin: 1em auto;
background-image: radial-gradient(circle at 100% 0, transparent 0%, transparent 700px, black 700px);
}<div></div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/378253/5f9763e2f585da822ddd/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
18
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)