Question

我在以文本为行/居中的按钮内创建半圆时遇到麻烦，请帮忙。

在这种情况下，最好使用按钮或看起来像按钮的div，请参见图片以供参考。

Answer 1

只需使用:after个伪元素即可获得所需的结果。

.btn-default {
    border: 1px solid #c7c7c7;
    padding: 12px 35px;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
    position: relative;
    background: #fff;
}
.btn-default:after {
    content: "";
    position: absolute;
    width: 10px;
    background: #f00;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    border-top-left-radius: 5px;
    z-index: 99;
    height: 20px;
    border-bottom-left-radius: 5px;
}

<button class="btn-default">Demo</button>

Answer 2

它们实际上是具有2个圆角的矩形。这应该做到。

.sob
{
	height: 2.5em;
}
.hl
{
	display: inline-block;
	width: 8px;
	height: 1em;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	margin-right: -7px;
	margin-left: 6px;
}

.sob:nth-of-type(1) > .hl
{
	background-color: red;
}

.sob:nth-of-type(2) > .hl
{
	background-color: orange;
}

.sob:nth-of-type(3) > .hl
{
	background-color: green;
}

.sob:nth-of-type(4) > .hl
{
	background-color: teal;
}

	<button class='sob'>High<span class='hl'></span></button>
	<button class='sob'>Moderate<span class='hl'></span></button>
	<button class='sob'>Low<span class='hl'></span></button>
	<button class='sob'>No Risk<span class='hl'></span></button>

Answer 3

https://codepen.io/arindamx01/pen/vwYoZL，请参阅我使用after

创建的内容

.eachDiv{
  border: 1px solid #ddd;  
  display: inline-block; /*what ever you can use */
  padding: 5px 40px 5px 20px;
  position: relative;
}
.redSemiCircle:after{
      content: "";
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 0;
    height: 20px;
    width: 10px;/*what ever widht you want */
    background: #f00;
    border-radius: 5px 0px 0 5px;
}

<div class="eachDiv redSemiCircle">Test</div>

Answer 4

您可以在添加圆圈之前和之后使用，然后将按钮设置为隐藏隐藏，以便仅显示圆圈的一半。

button{
  border: solid #999 1px; border-radius: 5px; background: #fafafa; padding: 5px 20px 5px 10px; position: relative; overflow: hidden;
}
button::before{
  content: "";
  width: 21px;
  height: 21px;
  position: absolute;
  border-radius: 50px;
  top: 1px;
  right: -10px;
}
#btn-1::before{
  background: #F91B00;
}
#btn-2::before{
  background: #FBC001;
}
#btn-3::before{
 background: #92D050;
}
#btn-4::before{
 background: #29AF4F;
}

<button id="btn-1">High</button>
<button id="btn-2">Moderate</button>
<button id="btn-3">Low</button>
<button id="btn-4">No Risk</button>

Answer 5

 .btn{
  background: #fff;
  border: 1px solid #ccc !important;
  }
  .btn div{
  display: inline-block;
  width:12px;
  height:24px;
  border-bottom-left-radius: 90px;
  border-top-left-radius: 90px;
  position:absolute;
  }
  .circle1{
  background: red;
  }
  .circle2{
  background: yellow;
  }
  .circle3{
  background: #80ff80;
  }
  .circle4{
  background: #008000;
  }
  .btnText{
 	padding-right:10px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>
<button class="btn"><span class="btnText">High</span><div class="circle1"></div></button>
<button class="btn"><span class="btnText">Moderate</span><div class="circle2"></div></button>
<button class="btn"><span class="btnText">Low</span><div class="circle3"></div></button>
<button class="btn"><span class="btnText">No Risk</span><div class="circle4"></div></button>
</body>
</html>

**We can do by this way also...** 


 <style>
  .btn{
  background: #fff;
  border: 1px solid #ccc;
  }
  .btn div{
  display: inline-block;
  width:12px;
  height:24px;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  position:absolute;
  }
  .circle1{
  background: red;
  }
  .circle2{
  background: yellow;
  }
  .circle3{
  background: #80ff80;
  }
  .circle4{
  background: #008000;
  }
  .btnText{
    padding-right:10px;
  }
  </style>
<body>
<button class="btn"><span class="btnText">High</span><div class="circle1"></div></button>
<button class="btn"><span class="btnText">Moderate</span><div class="circle2"></div></button>
<button class="btn"><span class="btnText">Low</span><div class="circle3"></div></button>
<button class="btn"><span class="btnText">No Risk</span><div class="circle4"></div></button>
</body>

如何在div或文本内联按钮中创建半圆

5 个答案: