如何制作CSS形状的按钮/边框?
请问,你能给我一些关于如何制作成型按钮/菜单导航的提示吗? 应该是这样的: 我尝试了一些有边框的东西,但只有当如何制作CSS形状的按钮/边框?,css,css-shapes,Css,Css Shapes,请问,你能给我一些关于如何制作成型按钮/菜单导航的提示吗? 应该是这样的: 我尝试了一些有边框的东西,但只有当div中没有文本时,它才起作用 以下是我尝试的代码: .border-right { font-size: 0px; line-height: 0%; width: 0px; width: 0px; border-top: 50px solid #93D1C1; border-bottom: 50px solid #4F4135; border-left: 50px
div
中没有文本时,它才起作用
以下是我尝试的代码:
.border-right {
font-size: 0px; line-height: 0%; width: 0px;
width: 0px;
border-top: 50px solid #93D1C1;
border-bottom: 50px solid #4F4135;
border-left: 50px solid #93D1C1;
border-right: 50px solid #93D1C1;
}
有什么想法吗?这就是你想要的吗?
你需要使用:after和:before哇,就是这样。非常感谢你!
body {
background-color: #4F4135;
}
.border-right {
font-size: 0px; line-height: 0%; width: 0px;
width: 0px;
border-top: 50px solid #93D1C1;
border-bottom: 50px solid #4F4135;
border-left: 50px solid #93D1C1;
border-right: 50px solid #93D1C1;
display: inline-block;
}
.border-wrong {
width: 100px;
background-color: #93D1C1;
display: inline-block;
position: relative;
z-index: 1;
text-align: center;
padding-top: 10px;
}
.border-wrong:after {
position: absolute;
content: "";
z-index: -1;
left: 0;
right: 0;
width: 0px;
background-color: #93D1C1;
border-top: 25px solid #93D1C1;
border-bottom: 25px solid #4F4135;
border-left: 50px solid #93D1C1;
border-right: 50px solid #93D1C1;
display: inline-block;
text-align: center;
}