手机版网页设计,搜狗seo软件,网站最新域名ip查询接口,网站关键词排名消失目录
前言
一、实现普通三角形效果
二、实现三角形的气泡框效果
三、实现空心三角形效果
四、总结
往期回顾 前言
CSS 提供了出色的方法可以实现基本的形状。本文就来看看如何使用这些方法来实现项目中常用的三种三角形效果。 一、实现普通三角形效果 实现步骤 #…
目录
前言
一、实现普通三角形效果
二、实现三角形的气泡框效果
三、实现空心三角形效果
四、总结
往期回顾 前言
CSS 提供了出色的方法可以实现基本的形状。本文就来看看如何使用这些方法来实现项目中常用的三种三角形效果。 一、实现普通三角形效果 实现步骤 设置一个div不设宽高设置透明通过调整不同方向边框的值来实现不同方向和大小的三角形
style/* 向上效果 */.up {width: 0;height: 0;border-top: 100px solid transparent; border-right: 100px solid transparent;border-left: 100px solid transparent;border-bottom: 100px solid green;}/* 向下效果 */.down {width: 0;height: 0;border-top: 100px solid orangered; border-right: 100px solid transparent;border-left: 100px solid transparent;border-bottom: 100px solid transparent;}/* 向左效果 */.left {width: 0;height: 0;border-top: 100px solid transparent; border-right: 100px solid burlywood;border-left: 100px solid transparent;border-bottom: 100px solid transparent;}/* 向右效果 */.right {width: 0;height: 0;border-top: 100px solid transparent; border-right: 100px solid transparent;border-left: 100px solid rebeccapurple;border-bottom: 100px solid transparent;}
/style
div classup/div
div classdown/div
div classleft/div
div classright/div 二、实现三角形的气泡框效果 先看效果 带三角形的气泡框可拆分为一个盒子和一个空心三角形。这时可同时设置before和after。各自设置好边框组成三角形相互掩盖即可达到效果。
代码如下
style.bubble{width:300px;height:300px;border: 10px solid burlywood;position: relative;}.bubble::after{content: ;position: absolute;right:60px;top:300px;width:0px;height:0px;border:30px solid transparent;border-top: 30px solid burlywood;}.bubble::before{content: ;position: absolute;top:295px;left:180px;z-index: 1;width:0px;height: 0px;border: 30px solid transparent;border-top:30px solid #fff; }
/style
div classbubble/div 三、实现空心三角形效果 先看效果 使用三角形加上伪类选择器before或after。before或after里设计一个三角形其中一个背景颜色与环境颜色相同一般为白色用白色的三角形掩盖住另一个三角形即可达到三角形空心的目的。代码如下
style.hollow{width:0px;height:0px;border: 100px solid transparent;border-bottom-color: burlywood;position: relative;}.hollow::after{content: ;position: absolute;right:-100px;top:-80px;width:0px;height:0px;border:100px solid transparent;border-bottom-color: #fff ;z-index: 2;}
/style
div classhollow/div 四、总结 以上主要总结了项目中常用三角形效果方案是否有你需要的一款呢欢迎大家在评论区交流。如果文章对你有所帮助❤️关注点赞❤️鼓励一下博主会持续更新。。。。 我的博客前端小阳仔_Html,CSS,JavaScript,Vue,React,Angular领域博主 往期回顾 css实现元素居中的6种方法
Angular8升级至Angular13遇到的问题
前端vscode必备插件(强烈推荐)
Webpack性能优化
vite构建如何兼容低版本浏览器
前端性能优化9大策略面试一网打尽
vue3.x使用prerender-spa-plugin预渲染达到SEO优化 vite构建打包性能优化 vue3.x使用prerender-spa-plugin预渲染达到SEO优化 ES6实用的技巧和方法有哪些 css超出部分显示省略号
vue3使用i18n 实现国际化
vue3中使用prismjs或者highlight.js实现代码高亮
什么是 XSS 攻击什么是 CSRF什么是点击劫持如何防御
