我想使用伪类,但不确定如何实现此效果
答案 0 :(得分:0)
.btn-root {text-align:center;}
button.btn.btn-default {
font-size: 20px;
padding: 23px;
width: 160px;
border-radius: 10px;
margin: 30px -5px 30px -5px;
display: inline-block;
background: #fff;
border: 2px solid #00f911;
cursor: pointer;
color:#333;
}
button.btn.btn-default:hover,button.btn.btn-default:focus {
background: #00f911;
outline: 0;
color:#333;
}
.seprator {
width: 160px;
height: 2px;
background-color: #00f911;
margin: 0px auto;
display: inline-block;
vertical-align: middle;
position:relative;
}
.seprator:first-child:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #00f911;
left: 0;
border-radius: 100%;
top: -9px;
}
.seprator:last-child:before {
width: 0;
height: 0;
border-right: 20px solid transparent;
content: '';
position: absolute;
top: -10px;
right: 0;
border-bottom: 10px solid #00f911;
}
<div class="btn-root">
<div class="seprator"></div>
<button class="btn btn-default">
Text
</button>
<div class="seprator"></div>
</div>
答案 1 :(得分:0)
您可以仅使用一个元素和一些背景来完成此操作:
.box {
padding:20px;
margin:0 60px;
border-radius:20px;
border:2px solid green;
display:inline-block;
position:relative;
}
.box::before {
content:"";
position:absolute;
z-index:-1;
left:-50px;
right:-50px;
height:20px;
top:calc(50% - 10px);
background:
/*arrow*/
linear-gradient(to bottom right,green 49%,transparent 52%) bottom right/15px 50%,
linear-gradient(to top right,green 49%,transparent 52%) top right/15px 50%,
/*circle*/
radial-gradient(green 56%,transparent 60%) -2px 50%/20px 20px,
/*line*/
linear-gradient(green,green) right center/50px 2px,
linear-gradient(green,green) left center /50px 2px;
background-repeat:no-repeat;
}
<div class="box">Some text</div>