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

是的,可以仅使用CSS创建该形状.您必须沿Y轴和Z轴旋转形状才能实现它.

沿Z轴旋转45度将产生菱形(如问题中所示)并沿Y轴旋转接近(但小于)90度将使得只有一部分形状可见前面因此会使它具有较短的对角线(类似指南针指针)的外观.

另外,为背景添加线性渐变和插入框阴影将有助于实现更接近所示形状的形状.

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轴而不是沿着Y轴和Z轴,针停留在其尖端上.以下是一个示例代码段.

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,#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实现,请查看以下代码段：

.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,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>