如何用图标和边框创建一个具有重要性的菱形div？

Question

我正在尝试创建一个带有边框的菱形div。但我面临的问题是它需要响应，形状也不寻常。附上图像以供参考。

我使用icomoon app创建了一个自定义图标字体。图标链接旁边的文字也需要响应

到目前为止我的尝试：

.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>

Answer 1

您可以使用以下内容：

.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>

Answer 2

试试这个：

.diamond {
    padding-bottom: 50%;
    width: 50%;
    border: 1px solid black;
    transform: rotate(45deg);
    position: relative;
    margin: 25%;
}
.cell {
    position: absolute;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: tomato;
    line-height: 50px;
    text-align: center;    
}
.t-l {
    top: 0px;
    left: 0px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.t-r {
    top: 0px;
    right: 0px;
    transform: translate(50%, -50%) rotate(-45deg);
}
.b-l {
    bottom: 0px;
    left: 0px;
    transform: translate(-50%, 50%) rotate(-45deg);
}
.b-r {
    bottom: 0px;
    right: 0px;
    transform: translate(50%, 50%) rotate(-45deg);
}

<强> Working Fiddle