形状类似指南针指针或Safari徽标的内部部分
Har*_*rry 7 html css css3 css-transforms css-shapes
我试图只使用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);
}
是否可以使用CSS创建我需要的形状？
注:一个类似的问题早有人问及关闭/删除"太宽泛",因为它并没有表现出任何编码的尝试.根据这个元讨论发布一个新问题并自我回答.请随意使用备用解决方案(或)编辑问题,以使其对未来的读者更有用.
Har*_*rry 10
对于搁在其尖端的针
是的,可以仅使用CSS创建该形状.您必须rotate沿Y轴和Z轴的形状来实现它.
沿Z轴旋转45度将产生菱形(如问题中所示)并沿Y轴旋转接近(但小于)90度将使得只有一部分形状可见前面因此会使它具有较短的对角线(类似指南针指针)的外观.
另外linear-gradient,为背景添加a 和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轴,而不是沿着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, #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实现,请查看以下代码段:
.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>- 我将来可能只需要使用这个:) (2认同)