html - 独特按钮形状的边框样式
问题描述
我正在尝试对齐伪元素的边框以均匀匹配按钮的边框。我正在使用 ::before 和 ::after 伪元素叠加来获得这种效果,但它们与边界的其余部分不匹配。
我弄乱了左右定位以及每个元素的边框宽度,但似乎无法让它们完美对齐
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-txt{
color: black;
}
button {
border: none;
outline: none;
padding: 0;
border-width: 0;
left: 40%;
}
button:hover {
cursor: pointer;
}
.signpost { /* our rectangle */
width:250px;
height:50px;
background-color: yellow;
margin:0px auto;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
.signpost:after { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:81%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: #fff; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.signpost:before { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:80%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: red; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<button class="signpost">
<p class="btn-txt">HELLO</p>
</button>
解决方案
这是一个不同的想法,代码更少,对齐很容易处理:
.box {
display:inline-block;
position:relative;
margin:10px;
padding:10px 50px 10px 10px;
border:2px solid red;
border-right:0;
z-index:0;
background:linear-gradient(yellow,yellow) left/calc(100% - 40px) 100% no-repeat;
}
.box:before,
.box:after{
content:"";
position:absolute;
z-index:-1;
right:0;
width:40px;
top:0;
bottom:50%;
border-right:2px solid red;
background:yellow;
transform:skewX(-45deg);
transform-origin:top;
}
.box:after {
transform:skewX(45deg);
transform-origin:bottom;
top:50%;
bottom:0;
}
<div class="box"> some text </div>
<div class="box"> some long long text </div>
<div class="box"> some long <br> long text </div>
推荐阅读
- android - 从服务器在我的应用程序中显示图像的最佳方式?
- angular - Angular 6:新 angular.json 格式的“app”部分
- wix - 基于 ALLUSERS / MSIINSTALLPERUSER 的“隐藏”功能
- php - 提交后保留值
- mysql - 使用restful API在sql server中插入和检索图像
- nlp - 如何将 NE 与其依赖项联系起来?
- java - 如何在 javac 中升级 JDK 模块
- r - 如何将特定字符串转换为日期时间?
- domain-driven-design - 使用 EF 遵循 DDD 时持续存在流程步骤和工件
- swift - 如何从按钮调用此功能?