我想把一个椭圆形的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

以下是使用伪元素largest和$http.post(url) .then(function(response) { // success log.debug(response.data); //console.log(message); }, function(response) { // optional // failed }); 的仅CSS解决方案。

Updated fiddle

＆＃13;

＆＃13;

:before

＆＃13;

:after

＆＃13;

＆＃13;

＆＃13;