作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否可以在 CSS 中制作一个如下图所示的按钮。我试过 jsfiddle我可以得到一个实心形状,但不能得到一个带有轮廓边框的形状?
jsfiddle代码:
<div class="point-btn"></div>
.point-btn
{
width: 148px;
height: 34px;
background: #0a187e;
position: relative;
-moz-border-radius:3px 0 0 3px;
-webkit-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
margin-left:50px;
}
.point-btn:before
{
content:"";
position: absolute;
left: 100%;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-left: 14px solid #0a187e;
border-bottom: 17px solid transparent;
}
最佳答案
不太漂亮 - 但你应该有一个不错的起点,只需使用另一个伪元素覆盖在你现有的三 Angular 形上:
.point-btn {
width: 148px;
height: 28px;
border: 2px solid #0a187e;
background: #fff;
position: relative;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
margin-left: 50px;
}
.point-btn:after {
content: "";
position: absolute;
left: 100%;
width: 0;
height: 0;
top: 0px;
border-top: 14px solid transparent;
border-left: 10px solid #fff;
border-bottom: 14px solid transparent;
}
.point-btn:before {
content: "";
position: absolute;
left: 100%;
width: 0;
top: -4px;
height: 0;
border-top: 18px solid transparent;
border-left: 14px solid #0a187e;
border-bottom: 17px solid transparent;
}
<div class="point-btn"></div>
关于html - 在 CSS 中为尖按钮制作轮廓边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24861697/
一直在思考什么是获得带有尖 Angular 的背景图像的最佳方式。我尝试了一些 css,例如 border-radius 和 clip-path 但没有成功。我想 clip-path 是最接近的可能答
我是一名优秀的程序员,十分优秀!