Question

What will be the code for such kind of border

Answer 1

试试这个

<强> HTML

<div class="wrapper">
  <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div>
    <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div>

  </div>

<强>的CSS

#container_2 {
  width: 80px;
  height: 80px;
  margin:16px;
  float:left;
  border: 1px solid red;
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -moz-transform: rotate(45deg);   /* Firefox */
    -ms-transform: rotate(45deg);   /* IE 9 */
    -o-transform: rotate(45deg);   /* Opera */
    transform: rotate(45deg);
}
.wrapper
{
  padding:20px;
  border:1px solid black;
  float:left;

}
img
{
  -webkit-transform: rotate(-45deg); /* Safari and Chrome */
    -moz-transform: rotate(-45deg);   /* Firefox */
    -ms-transform: rotate(-45deg);   /* IE 9 */
    -o-transform: rotate(-45deg);   /* Opera */
    transform: rotate(-45deg);
    position: absolute;
    top: 21px;
    left: 21px;
}

演示Here

＆＃13;

#container_2 {
  width: 80px;
  height: 80px;
  margin:16px;
  float:left;
  border: 1px solid red;
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -moz-transform: rotate(45deg);   /* Firefox */
    -ms-transform: rotate(45deg);   /* IE 9 */
    -o-transform: rotate(45deg);   /* Opera */
    transform: rotate(45deg);
}
.wrapper
{
  padding:20px;
  border:1px solid black;
  float:left;
  
}
img
{
  -webkit-transform: rotate(-45deg); /* Safari and Chrome */
    -moz-transform: rotate(-45deg);   /* Firefox */
    -ms-transform: rotate(-45deg);   /* IE 9 */
    -o-transform: rotate(-45deg);   /* Opera */
    transform: rotate(-45deg);
    position: absolute;
    top: 21px;
    left: 21px;
}

＆＃13;

<div class="wrapper">
  <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div>
    <div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div><div id="container_2"><img src="https://cdn1.iconfinder.com/data/icons/iconbeast-lite/30/crown.png"/></div>
    
  </div>

＆＃13;

如何围绕这个图标边框？（HTML / CSS）

1 个答案: