实现效果：
实现思路：
- 用css边框可以模拟三角效果
- 父盒子宽高为0
- 4个边框都要写，只保留需要的一边边框的颜色，其他不省略，改为transparent透明
- 为了兼顾兼容性低版本浏览器，加上font-size:0;line-height:0;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css三角形之美</title>
<style> span {
width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #f40; /*照顾兼容性低版本浏览器*/ font-size: 0; line-height: 0; } p {
vertical-align: middle; } </style>
</head>
<body>
<div>
<p>网上有害信息举报专区<span></span></p>
</div>
</body>
</html>
例子：实现京东-导航栏手机京东处-三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东三角形-导航栏手机京东处</title>
<style> div {
position: relative; width: 300px; height: 200px; background-color: pink; margin: 100px auto; border-radius: 20px; } p {
position: absolute; top: 0; left: 50%; margin-left: -20px; margin-top: -40px; width: 0px; height: 0px; border-style: solid; border-width: 20px; border-color: transparent transparent pink transparent; font-size: 0; line-height: 0; } </style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
lvan学习笔记-文章内容仅个人观点
2019.12.12
今天的文章css高级技巧——css三角形实现分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/7499.html
