<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
html - 如何创建带有图标和边框的响应式菱形 div？
我正在尝试创建一个带有边框的菱形 div。但我面临的问题是它需要响应，而且形状也很不寻常。附上一张图片以供引用。
我使用 icomoon 应用程序创建了自定义图标字体。图标链接旁边的文本也需要响应
到目前为止我的尝试:
.diamond {
width: 60px;
height: 60px;
border: 1px solid #626262;
margin-top: 20px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.diamond i {
display: inline-block;
margin: 0;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.diamond .top {
margin-top: -10px;
margin-bottom: 10px;
}
.diamond .bottom {
margin-top: 10px
}
.diamond .top.left,
.diamond .bottom.left {
margin-left: -10px;
}
.diamond .top.right,
.diamond .bottom.right {
margin-right: -10px;
}
i.socialicn {
color: #fff;
padding: 6px 6px;
background-color: #8a4d8e;
border-radius: 50%;
vertical-align: middle;
font-size: 17px;
}
i.socialfb {
color: #fff;
padding: 6px 10px;
background-color: #8a4d8e;
border-radius: 50%;
vertical-align: middle;
font-size: 17px;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
<div class="row">
<div class="col-sm-12 col-md-12 col-xs-12">
<div class="diamond center-block">
<div class="clearfix">
<div class="pull-left"><a href="#"><i class="fa fa-facebook top left socialfb"></i></a>
</div>
<div class="pull-right"><a href="#"><i class="fa fa-twitter top right socialicn"></i></a>
</div>
</div>
<div class="clearfix">
<div class="pull-left"><a href="#"><i class="fa fa-envelope bottom left socialicn"></i></a>
</div>
<div class="pull-right"><a href="#"><i class="fa fa-linkedin bottom right socialicn"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
你可以使用类似的东西:
.wrap {
height: 20vw;
width: 20vw;
position: relative;
margin: 50px auto;
border: 5px solid black;
transform: rotate(45deg);
transform-origin:top left;
min-width:60px;min-height:60px;
}
.wrap a {
position: absolute;
height: 30px;
width: 30px;
background: tomato;
border-radius: 50%;
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 30px;
transform: rotate(-45deg);
}
.wrap a:first-child {
top: -15px;
left: -15px;
}
.wrap a:not(:nth-child(3)) b{position:absolute; left:150%; width:auto;}
.wrap a:nth-child(2) {
top: -15px;
right: -15px;
}
.wrap a:nth-child(3) {
bottom: -15px;
left: -15px;
}
.wrap a:nth-child(4) {
bottom: -15px;
right: -15px;
}
.wrap a:nth-child(3) b{position:absolute; right:150%; width:auto;}<div class="wrap">
<a href="#">1 <b>Text</b></a>
<a href="#">2 <b>Text</b></a>
<a href="#">3 <b>Text</b></a>
<a href="#">4 <b>Text</b></a>
</div>关于html - 如何创建带有图标和边框的响应式菱形 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30883696/