我想将一个椭圆 css 形状变成带箭头的椭圆

Question

我目前有以下代码。这是 Fiddle

content:counter(step) !important;
counter-increment:step !important;
width:90px !important;
height:40px !important; 
line-height:35px !important;
/*border:3px solid #ddd !important;*/
display:block !important;
text-align:center !important;
margin: 0 auto 10px auto !important;
background-color: gray !important; /*white orig */

border-top-left-radius: 100em;
border-bottom-left-radius: 100em;
border-top-right-radius: 100em;
border-bottom-right-radius: 100em;
/*border-right: 10px solid white;*/

它是这样的：

我希望它是这样的：

我怎样才能做出那样的形状？

Answer 1

虽然可以完全用 CSS 做到这一点，但可能很难让它在所有浏览器中看起来都很完美，您将需要额外的 HTML 标记。看看这个问题：How to create a triangle in CSS3 using border-radius

我会做的是像这样制作 SVG 背景：

<svg viewBox="0 0 88 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="88px" height="40px">
    <g>
        <path d="M 66 40 L 66 39.755 C 68.7256 40.4302 71.7275 39.7039 73.8578 37.5735 L 85.5735 25.8578 C 88.8088 22.6226 88.8088 17.3774 85.5735 14.1422 L 73.8578 2.4265 C 71.7275 0.2961 68.7256 -0.4303 66 0.245 L 66 0 L 20 0 C 8.9542 0 0 8.9542 0 20 C 0 31.0458 8.9542 40 20 40 L 66 40 Z" fill="#888888"/>
    </g>
</svg>

在您的 li 上使用该背景，然后将您的 :before 设置为白色圆圈中的数字。

https://jsfiddle.net/v8b9s0vb/1/

Answer 2

纯 css 绝对有可能我几乎用 css 做到了 here只需更改值即可获得所需的输出。

transform: translateY(50%) rotate(120deg) skewY(28deg) scaleX(.866);

Answer 3

这是使用伪元素 :before 和 :after 的仅 CSS 解决方案。

Updated fiddle

ul {
  list-style: none;
  counter-reset: step;
}
.progressbar li {
  position: relative;
  width: 60px;
  height: 40px;
  line-height: 35px;
  display: block;
  margin: 0 auto 10px auto;
  background-color: #d5d5d5;
  border-radius: 20px 0px 0px 20px;
}
.progressbar li:before {
  content: counter(step) !important;
  counter-increment: step !important;
  font-family: arial;
  font-size: 14px;
  position: absolute;
  background-color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  top: 50%;
  text-align: center;
  margin-left: 4px;
  color: #666666;
  transform: translateY(-50%);
}
.progressbar li:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: #d5d5d5;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  z-index: -1;
}

<ul class="progressbar">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我想将一个椭圆 css 形状变成带箭头的椭圆

I want to turn one oval css shape into oval with arrow

html

css

border

shapes