javascript - 如何使用 CSS 创建马蹄形仪表

Question

我希望使用 CSS 绘制一个马蹄形仪表，如下图所示:

我尝试过的方法是做一些事情，比如创建一个圆圈并像这样的 fiddle 一样切断底部: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