回答
使用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
- 1. 如何在矩阵中间创建一个填充菱形的菱形?
- 2. 如何使用css创建三角形
- 3. 如何使用CSS创建此形状?
- 4. 菱形方形分形的“内外”实现问题
- 5. 用css菱形对齐文本
- 6. 如何使用css创建asp:button图标?
- 7. 如何使用CSS创建此标头?
- 8. 如何使用css创建不同形状的梯形图像?
- 9. Eclipse插件 - 如何使用多边形创建菱形图形(或通过直接实现IFigure)多边形
- 10. 用CSS创建标签矩形
- 11. 如何用css创建角边形状?
- 12. CSS问题,创建标签
- 13. 使用openCV检测Hazmat标签(菱形正方形)
- 14. 使用axis2创建标题java2wsdl - 如何?
- 15. 使用CSS创建复杂的形状
- 16. 如何创建使用CSS
- 17. Triple'菱形'图像拆分CSS
- 18. Psychtoolbox更改为菱形/菱形绘制的方形
- 19. CSS3菱形
- 20. 生成菱形
- 21. 缩放菱形
- 22. 范围菱形
- 23. 菱形按钮
- 24. 如何用HTML和CSS创建流畅的标题?
- 25. 如何在swift 3.0中编写图像上的菱形和菱形?
- 26. 如何绘制旋转的菱形?
- 27. 如何重塑的UIView像菱形
- 28. 如何使用CSS创建一个“部分边框”的圆形
- 29. 用CSS创建形状
- 30. 使用CSS创建负面条形图
你知道SVG,我不知道,如果它会在你的工作case.but我觉得这是更好的。 –