-4
请帮助我如何在html中创建此类鉴定。我想在html中创建如下图片的个人鉴定
请帮助我如何在html中创建此类鉴定。我想在html中创建如下图片的个人鉴定
可以使用CSS伪元素创建(:或前:后)。我做了一个快速的HTML结构,检查这个JSFiddle
CSS:
.profile {
width: 200px;
height: 200px;
display: block;
color: rgba(0, 0, 0, 0);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 80px;
overflow: hidden;
}
.profile::before {
content: "";
position: absolute;
width: 640px;
height: 393px;
top: -100px;
left: -200px;
z-index: -1;
background: url(https://cdn.pixabay.com/photo/2017/06/26/15/00/seascape-2444040_640.jpg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
HTML:
<div class="profile">
<!-- Overlay div content goes here -->
</div>
谢谢。这对我来说真的很有帮助。 (y) –
如果我提供的解决方案可以帮助您,请将我的答案投票并将其标记为已接受的答案。干杯! –
创建三个div的。将div旋转到45度。你会得到你想要的 –