回答
使用CSS转换:
您可以通过使用两个伪元素创建菱形和CSS变换旋转像在下面的代码片段。这将使文本不会受到转换的影响,因此定位它会相对容易。
rotateZ(45deg)
产生一个相等的菱形形状,而额外的rotateX(45deg)
负责拉伸的外观,这使得侧面看起来像他们是不相等的长度。
文字定位相当简单,只需将其与中心对齐,然后将line-height
设置为与容器的height
相同。请注意,这种垂直居中的方法只能在文本排成一行时才起作用。如果它可以跨越多行,那么它应该放在一个额外的元素中,并且translateY(-50%)
变换应该用于垂直居中。
.diamond {
position: relative;
height: 200px;
width: 200px;
line-height: 200px;
text-align: center;
margin: 10px 40px;
}
.diamond:before {
position: absolute;
content: '';
top: 0px;
left: 0px;
height: 100%;
width: 100%;
transform: rotateX(45deg) rotateZ(45deg);
box-shadow: 0px 0px 12px gray;
}
.diamond:after {
position: absolute;
top: 10px;
left: 10px;
content: '';
height: calc(100% - 22px); /* -22px is 2 * 10px gap on either side - 2px border on either side */
width: calc(100% - 22px); /* -22px is 2 * 10px gap on either side - 2px border on either side */
border: 1px solid orange;
transform: rotateX(45deg) rotateZ(45deg);
}
<div class='diamond'>
Text Here
</div>
使用SVG:
相同的形状可以使用SVG path
元件也代替CSS变换来创建。样本可在下面的代码片段中找到。
.diamond {
position: relative;
height: 200px;
width: 300px;
line-height: 200px;
text-align: center;
}
.diamond svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
}
path.outer {
fill: white;
stroke: transparent;
-webkit-filter: url(#dropshadow);
filter: url(#dropshadow);
}
path.inner {
fill: transparent;
stroke: orange;
}
<div class='diamond'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<filter id="dropshadow" height="125%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feOffset dx="0" dy="0" result="offsetblur" />
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<path d='M2,50 50,2 98,50 50,98z' class='outer' />
<path d='M8,50 50,8 92,50 50,92z' class='inner' />
</svg>
Text Here
</div>
<!-- Filter Code Adopted from http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 -->
伟大的回答哈利。非常感谢。 – Wilhelm
是否金刚石有不同的宽度和高度?否则,你可以用伪元素转换一个正方形。
body {
text-align: center;
padding-top: 30px;
}
.diamond {
width: 100px;
height: 100px;
position: relative;
margin-top: 25px;
display: inline-block;
}
.diamond:before {
position: absolute;
display: block;
content: "";
width: 100px;
height: 100px;
left: 0;
top: 0;
right: 0;
bottom: 0;
-webkit-transform: rotate(45deg);
-webkit-transition: border-color 0.3s;
-moz-transform: rotate(45deg);
-moz-transition: border-color 0.3s;
transform: rotate(45deg);
box-shadow: 0px 0px 21px -2px rgba(0, 0, 0, 0.25);
}
.diamond-inner {
width: 80px;
height: 80px;
position: relative;
margin-top: 25px;
display: inline-block;
}
.diamond-inner:before {
position: absolute;
display: block;
content: "";
width: 80px;
height: 80px;
left: 0;
top: -15px;
right: 0;
bottom: 0;
border: 1px solid #9C9819;
-webkit-transform: rotate(45deg);
-webkit-transition: border-color 0.3s;
-moz-transform: rotate(45deg);
-moz-transition: border-color 0.3s;
transform: rotate(45deg);
}
<div class="diamond">
<div class="diamond-inner">
Test
</div>
</div>
另见:JSFiddle
这是对的,但为了简洁,我给了哈利答案,因为他提出了两个选择。 – Wilhelm
你知道SVG,我不知道,如果它会在你的工作case.but我觉得这是更好的。 –