如何用css快速实现三角形

fox/ 2023年08月19日/ CSS教程/ 浏览 1527

在网页中,我们经常会用到一些三角形组成的图形,由于块结构基础是四边形,很多同学在这种情况会应用图片来实现。其实通过css和伪类也可以实现各种三角形。

如图:回复框的左上角这个三角形




本质:还是利用了盒子的边框


做法:


1.设置三角形的宽高

2.设置三角形各边角度

3.四个边都要的,只保留我们需要的边框颜色,其他的 颜色透明即可。


css参考代码如下:


.zhuige-comment-reply {
	padding: 20px;
	background-color: #F9F9F9;
	border-radius: 8px;
	margin-top: 10px;
	position: relative;
}
/* 回复主背景框要position: relative,利用伪类:before实现三角,绝对定位*/

.zhuige-comment-reply:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: -8px;
    left: 24px;
    background: linear-gradient(135deg, transparent 0, transparent 50%, #F9F9F9 50%, #F9F9F9 50%, #F9F9F9 100%) left top / 50% 50% no-repeat,
    linear-gradient(225deg, transparent 0, transparent 50%, #F9F9F9 50%, #F9F9F9 50%, #F9F9F9 100%) right top / 50% 50% no-repeat; 
  }


访问地址如下:https://www.zhuige.com/bbs/4021.html


大家可以用浏览器调试工具进行测试。

发表评论

暂无评论,抢个沙发...

客服 工单