在网页中,我们经常会用到一些三角形组成的图形,由于块结构基础是四边形,很多同学在这种情况会应用图片来实现。其实通过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
大家可以用浏览器调试工具进行测试。
-
两行css代码快速实现文字描边效果在网站中,我们可以通过css实现文字描边,模拟霓虹灯的效果
-
css实现手机充电动画效果通过css,我们可以实现很多动画效果,例如,我们通过animation,transform,filter,这些动画相关的css属性,就可以模拟手机充电的动画效果:
-
如何用css实现倒影效果在电商和产品广告中,我们经常看到水中倒影的效果,其实这种效果我们也可以通过css来实现。并且这种效果也是通过css的几种属性来实现。
-
利用css的延迟操作为页面的交互和动画带来更好的效果css延迟操作是一种常见的css技术,可以用来延迟元素的显示时间。通过在css中设置元素的延迟时间,可以让元素在页面加载完成后才显示,从而为页面的交互和动画效果带来更好的体验。
-
如何利用css的延迟属性结合简单js实现渐变动效通过简单的Scss+TypeScript。我们可以实现视频中常见的渐变动效,这里是通过原生css+JS来实现的
-
如何利用css和简单JavaScript实现文字渐隐动态效果通过css的animation动画及js循环控制实现
暂无评论,抢个沙发...