Question

我希望使用CSS绘制一个类似马的鞋子，如下图所示：

horse-shoe-gauge

我尝试过的方法就是创建一个圆圈并像这个小提琴一样切掉底部：http://jsfiddle.net/Fz3Ln/12/

标记：

<div class="container">
    <div class="horse-shoe-gauge"></div>
</div>

的CSS：

.container {
  width: 200px;
  height: 180px;
  overflow: hidden;
}

.horse-shoe-gauge {

    width: 200px;
    height: 200px;
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    border: 10px solid black;
    box-sizing: border-box;
}

但是我无法获得圆形的圆形底部。

任何建议都将不胜感激。感谢。

Answer 1

我添加了一个外部容器，然后绝对放置一些额外的部件，以获得您正在寻找的圆底。

<强> HTML

<div class="outerContainer">
    <div class="container">
        <div class="horse-shoe-gauge"></div>
    </div>
    <div class="bottom left"></div>
    <div class="bottom right"></div>
</div>

<强> CSS

.outerContainer {
    position: relative;
}
.container {
    width: 200px;
    height: 180px;
    overflow: hidden;
}
.horse-shoe-gauge {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    border: 10px solid black;
    box-sizing: border-box;
}
.bottom {
    position: absolute;
    width: 25px;
    height: 10px;
    border-radius: 8px;
    background: #000;
}
.left {
    bottom: -6px;
    left: 38px;
    -webkit-transform: rotate(32deg);
}
.right {
    bottom: -6px;
    left: 137px;
    -webkit-transform: rotate(-32deg);
}

这里是jsFiddle

Answer 2

与:before和:after略有不同，因此html不需要修改。

但我可能会考虑使用canvas，因为它会提供更多控制权。

http://jsfiddle.net/Fz3Ln/16/

.horse-shoe-gauge:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    left: 12px;
    height: 10px;
    width: 10px;
    border: 15px solid white;
    border-top-color: transparent;
    border-left-color: transparent;
    background-color: black;
    background-clip: padding-box;
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
}

.horse-shoe-gauge:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    right: 12px;
    height: 10px;
    width: 10px;
    border: 15px solid white;
    border-top-color: transparent;
    border-right-color: transparent;
    background-color: black;
    background-clip: padding-box;
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
}

要查看其工作原理，请参阅this fiddle。

Answer 3

尝试使用此尺寸：

http://codepen.io/robcampo/pen/YXpWLP

应该从IE10 +开始工作。它基本上旋转了两个div，彼此相邻，并使用标记来修整边缘：

<div class="radial-wrapper">
  <div class="radial-section radial-right-section">
    <div class="wedge"></div>
  </div>
  <div class="radial-section radial-left-section">
    <div class="wedge"></div>
  </div>
  <div class="marker start"></div>
  <div class="marker end"></div>
</div>

可能有点难以阅读，但它源自本教程：

https://cssanimation.rocks/watch/

贯穿每一步。

如何使用CSS创建一个类似马蹄的仪表

3 个答案: