我试图只使用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创建我需要的形状？
注意：之前已经询问了similar question,并且因为没有显示任何编码尝试而被关闭/删除为“太宽”.根据this meta discussion发布一个新问题并自行回答.请随意填写备用解决方案(或)编辑问题,使其对未来的读者更有用.
解决方法
对于搁在其尖端的针
是的,可以仅使用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>
.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>
