分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

css画三角形以及实现带三角的阴影效果

发布时间:2023-09-06 02:03责任编辑:胡小海关键词:暂无标签

先上图看效果

1.三角形怎么画

通过控制四周边框实现,想要红色区域三角形的就设置其他三边颜色设置为transparent,想要什么什么三角形就其他边设置为透明颜色即可.

2.三角形画好后,利用伪类,定位实现带三角对话框效果

3.实现阴影效果,因为三角形视觉看上去是三角形,但其实是矩形,直接给加box-shadow实现不了三角形的,

解决办法:再加一个伪类,设置他的颜色为阴影的颜色,然后利用定位差覆盖实现阴影效果

css画三角形以及实现带三角的阴影效果

原文地址:https://www.cnblogs.com/ljzy/p/9302536.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved