gpt4 book ai didi

html - 在 css 中创建三 Angular 形

转载 作者:太空宇宙 更新时间:2023-11-03 19:40:13 26 4
gpt4 key购买 nike

enter image description here

如何在 CSS 中实现这一点。我用谷歌搜索,但没有找到任何解决方案。

最佳答案

试试这个:

HTML

<nav class="nav">
<ul>
<li><a href="#">1. Account Info</a></li>
<li><a href="#">2. Verification</a></li>
<li><a href="#">3. Enjoy</a></li>
</ul>
</nav>

样式表

.nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
width: 100%;
}
.nav ul li {
float: left;
margin: 0 .2em 0 1em;
}
.nav ul a {
background: red;
padding: .3em 1em;
float: left;
text-decoration: none;
color: #fff;
position: relative;
}
.nav ul li:first-child a:before {
content: normal;
}
.nav ul li:last-child a:after {
content: normal;
}
.nav ul a:before {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: red rgba(0, 0, 0, 0);
left: -1em;
margin-left: 1px;
}
.nav ul a:after {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid rgba(0, 0, 0, 0);
border-bottom: 1.5em solid rgba(0, 0, 0, 0);
border-left: 1em solid red;
right: -1em;
margin-right: 1px;
}

这是 Demo

关于html - 在 css 中创建三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23008898/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com