【CSS】使用 CSS 实现三角形 ( 宽高设置为 0 | 设置四个边框宽度 / 样式 / 颜色值 | 兼容低版本浏览器 | 基本示例 | 对话框示例 )
2023-09-14 09:07:26 时间
一、使用 CSS 实现三角形
使用 CSS 实现三角形步骤 :
- 首先 , 宽度 / 高度 设置为 0 ;
/* 宽高设置为 0 像素 */
width: 0;
height: 0;
- 然后 , 设置 4 个边框 , 每个边框都要设置相同的宽度 , 实线 , 以及颜色值 ; 该颜色值就是显示的三角形颜色值 ;
/* 4 个边框都要设置 如果不需要 */
border-top: 10px solid blue;
border-right: 10px solid red;
border-bottom: 10px solid purple;
border-left: 10px solid orange;
- 最后 , 设置低版本浏览器兼容 ;
/* 兼容低版本浏览器添加的设置 */
font-size: 0;
line-height: 0;
二、使用 CSS 实现三角形代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS 三角形</title>
<style>
.box {
/* 宽高设置为 0 像素 */
width: 0;
height: 0;
/* 4 个边框都要设置 如果不需要 */
border-top: 10px solid blue;
border-right: 10px solid red;
border-bottom: 10px solid purple;
border-left: 10px solid orange;
/* 兼容低版本浏览器添加的设置 */
font-size: 0;
line-height: 0;
}
.box2 {
/* 宽高设置为 0 像素 */
width: 0;
height: 0;
/* 设置 4 个边框的样式 */
border-style: solid;
/* 设置 4 个边框的宽度 */
border-width: 10px;
/* 设置 4 个边框的颜色
都设置成透明
如果想要哪个*/
border-color: transparent transparent transparent red;
/* 兼容低版本浏览器添加的设置 */
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
显示效果 :
下面是放大 400% 后的效果 ;
设置 10 像素的边框 , 形成的三角形底部边为 20 像素 ;
三、使用 CSS 实现 对话框 代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS 三角形示例</title>
<style>
body {
background-color: black;
}
.triangle {
/* 子元素使用绝对定位 父容器需要使用相对定位 */
position: relative;
/* 设置对话框下方的矩形框尺寸 */
width: 200px;
height: 100px;
/* 设置对话框颜色值 */
background-color: white;
/* 浏览器水平居中 */
margin: 100px auto;
}
.triangle-in {
/* 三角形使用绝对定位 , 父容器使用相对定位 */
position: absolute;
/* 向上移动 40 像素 */
top: -40px;
/* 设置水平居中 左侧先移动到中间 然后再向左移动 20 像素 */
left: 50%;
margin-left: -20px;
/* 宽高设置为 0 */
width: 0;
height: 0;
/* 设置三角形底边 40 像素 */
border-style: solid;
border-width: 20px;
/* 保留下边框颜色 其它边框都设置透明 */
border-color: transparent transparent white transparent;
/* 兼容低版本浏览器 */
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div class="triangle">
<div class="triangle-in"></div>
</div>
</body>
</html>
执行结果 :
相关文章
- CSS写一个圣诞树Chrome浏览器小插件
- PyCharm安装配置谷歌浏览器驱动[通俗易懂]
- css 更改所有text,CSS之cssText「建议收藏」
- CSS媒体查询_css网页
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- CSS 换行_css不允许换行
- 在服务器端获取和解析浏览器 UA
- 360浏览器兼容ie6-360极速浏览器
- HTML--浏览器支持参考手册
- 赶紧自查这个插件!黑客可能远程控制你的谷歌浏览器
- CSS 之 Opacity多浏览器透明度兼容处理详解编程语言
- css 完美垂直居中解决方案兼容ie8以上等其他浏览器详解编程语言
- IE谢幕,是时候重新定义浏览器了
- Mozilla 正式宣布 Quantum 浏览器引擎项目
- CSS连接MySQL构建可视化Web应用(css连接mysql)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 新版本火狐浏览器开始支持WebVR功能
- 针对浏览器隐藏CSS之独孤九剑
- 多浏览器css兼容分析小结
- juqery学习之六CSS--css、位置、宽高
- jquery移除button的inlineonclick事件(已测试及兼容浏览器)
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- js+css实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
- JS打印界面的CSS居中代码适用所有浏览器
- JS辨别访问浏览器判断是android还是ios系统