类似于指南针指针或 Safari 徽标内部的形状

Question

我正在尝试仅使用 CSS 制作以下形状。我知道使用图像或 SVG 来实现这种形状会容易得多，但我正在尝试使用 CSS 来实现它以进行概念验证。

以下是我迄今为止尝试过的代码。它使用transform: rotate(45deg) 创建了菱形，但对角线的长度相同，而我需要的形状有一个很长的对角线，另一个很短。

.separator{
    background: #555;
    top: 40px;
    padding-top: 0px;
    margin: 0px 40px;    
    height: 100px;
    width: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

Fiddle Demo

是否可以使用 CSS 创建我需要的形状？

_{注意：similar question 早先被问及并被关闭/删除为“太宽泛”，因为它没有显示任何编码尝试。根据this meta discussion 发布一个新问题并自行回答。请随时提供替代解决方案（或）编辑问题以使其对未来的读者更有用。}

Answer 1

针尖上的针

是的，可以仅使用 CSS 创建该形状。您必须rotate 沿Y 轴和Z 轴 的形状来实现它。

将其沿 Z 轴旋转 45 度将产生菱形形状（如问题所示）并沿 Y 轴旋转 接近（但小于）90 度只会使形状的一部分从前面可见，从而使其看起来具有较短的对角线（类似于指南针指针）。

另外添加一个 linear-gradient 作为背景和一个 inset box-shadow 将有助于实现一个更接近问题所示形状的形状。

body {
  background: #333;
  font-family: Calibri;
  font-size: 18px;
}
div {
  height: 200px;
  width: 150px;
  display: inline-block;
  vertical-align: middle;
  color: white;
  padding-top: 40px;
}
.separator {
  background: #555;
  top: 40px;
  padding-top: 0px;
  height: 160px;
  width: 160px;
  background-image: linear-gradient(-45deg, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;
  transform: rotateY(87deg) rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
  Some lengthy paragraph content which wraps around when it exceeds the width
</div>
<div class='separator'></div>
<div>
  Some lengthy paragraph content which wraps around when it exceeds the width
</div>

---

用于放置在底座上的针

对于放在底座上的针，旋转应该沿着 X 轴和 Z 轴s，而不是沿着 Y 轴和 Z 轴提示。下面是一个示例 sn-p。

body {
  background: #AAA;
  font-family: Calibri;
  font-size: 18px;
}
div {
  height: 200px;
  width: 150px;
  display: inline-block;
  vertical-align: middle;
  color: white;
  padding-top: 40px;
  margin: 40px;
}
.separator {
  background: #555;
  top: 40px;
  padding-top: 0px;
  height: 160px;
  width: 160px;
  background-image: linear-gradient(-45deg, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;
  transform: rotateX(87deg) rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='separator'></div>

---

使用上述方法创建的罗盘指针：

这是一个完全使用 CSS 创建的示例指南针指针（部分灵感来自 Safari 徽标）。内部的指针或针是使用上述方法创建的。

.container {
  position: relative;
  height: 152px;
  width: 152px;
  padding: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, white 58%, #999 70%, #EEE 80%);
  border: 1px solid #AAA;
}
.dial {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: linear-gradient(#1ad4fd, #1d65f0 100%);
  border: 1px solid #999;
  position: relative;
  animation: rotatedial 2s 6 alternate forwards;
}
.dial:after {
  content: '';
  position: absolute;
  top: 25px;
  left: 25px;
  height: 100px;
  width: 100px;
  background-image: linear-gradient(-45deg, white 0%, white 47%, red 50%);
  box-shadow: inset 0px 6px 22px 0px #CCC, inset -6px -6px 22px 0px #AAA;
  transform: rotateY(85deg) rotate(45deg);
}
.dial:before {
  content: '';
  position: absolute;
  top: 72px;
  left: 70px;
  height: 8px;
  width: 8px;
  background: radial-gradient(circle at 50% 50%, white 30%, grey 100%);
  border: 1px solid #999;
  border-radius: 50%;
  z-index: 2;
}
.hands,
.hands-small {
  position: absolute;
  height: 150px;
  width: 150px;
  top: 11.25px;
  left: 11px;
  z-index: 0;
}
.hands:before,
.hands:after,
.hands .hand:before,
.hands .hand:after {
  content: '';
  position: absolute;
  top: 0;
  left: 74.5px;
  width: 1px;
  height: 12px;
  background: #EEE;
  border-radius: 4px;
  box-shadow: 0px 138px #EEE;
  transform-origin: 50% 75px;
}
.hands-small:before,
.hands-small:after,
.hands-small .hand-small:before,
.hands-small .hand-small:after {
  content: '';
  position: absolute;
  top: 0;
  left: 74.5px;
  width: 1px;
  height: 7px;
  background: #EEE;
  border-radius: 4px;
  box-shadow: 0px 143px #EEE;
  transform-origin: 50% 75px;
}
.hands:before {
  transform: rotate(-45deg);
}
.hands:after {
  transform: rotate(0deg);
}
.hand:before {
  transform: rotate(45deg);
}
.hand:after {
  transform: rotate(90deg);
}
.hands-small:before {
  transform: rotate(-22.5deg);
}
.hands-small:after {
  transform: rotate(22.5deg);
}
.hand-small:before {
  transform: rotate(67.5deg);
}
.hand-small:after {
  transform: rotate(112.5deg);
}
@keyframes rotatedial {
  0% {
    transform: rotate(35deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <div class="dial"></div>
  <div class="hands">
    <div class="hand"></div>
  </div>
  <div class="hands-small">
    <div class="hand-small"></div>
  </div>
</div>

---

如果您无意中在此页面上寻找 SVG 实现，请查看以下 sn-p：

.separator {
    position: relative;
    width: 12px;
}
svg {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
path {
    fill: url(#MyGradient);
}
path#shade {
    stroke: #2E2E2E;
    stroke-width: 3;
}

/* Just for the demo to style the divs and position */

body {
    background: #333;
    font-family: Calibri;
    font-size: 18px;
}
.container {
    display: flex;
}
.container > .content {
    flex: 1;
    flex-grow: 1;
    color: white;
    margin: 20px;
}

<div class='container'>
    <div class='content'>Some lengthy paragraph content which wraps around when it exceeds the width.Some lengthy paragraph content which wraps around when it exceeds the width.Some lengthy paragraph content which wraps around when it exceeds the width.</div>
    <div class='separator'>
        <svg viewBox='0 0 10 200' preserveAspectRatio='none'>
            <defs>
                <linearGradient id="MyGradient" x1=' 50% ' y1='0% ' x2='50% ' y2='100% '>
                    <stop offset="0%" stop-color="#333" />
                    <stop offset="100%" stop-color="#555" />
                </linearGradient>
            </defs>
            <path d='M0,100 5,0 10,100 z' id='shade' />
            <path d='M0,100 5,0 10,100 5,200 z ' />
        </svg>
    </div>
    <div class='content '>Some lengthy paragraph content which wraps around when it exceeds the width.Some lengthy paragraph content which wraps around when it exceeds the width.Some lengthy paragraph content which wraps around when it exceeds the width.</div>
</div>