どのように私はこのようなアイコンの周囲に境界線を与えることができますか？（HTML/CSS）

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; 
} 

これは、CSSのコードがあると思い

デモHere

#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; 
 
}

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