边框与正方形

Question

如何将正方形添加到div与图像之间的边框上？根据文本的位置，正方形将位于左侧或右侧（如果文本右对齐，则正方形将位于左下方;如果文本左对齐，则正方形将位于右上方）。

.item { 
 
    flex: 1; 
 
    background: #8d0700; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    padding: 0px; 
 
    width: 250px; 
 
    border: 5px solid #000; 
 
} 
 

 
.image img { 
 
    width: auto; 
 
    height: 450px; 
 
    outline: 2px solid rgba(218, 236, 255, 0.6); 
 
    outline-offset: -6px; 
 
} 
 

 
.name { 
 
    height: 100px; 
 
    text-overflow: wrap; 
 
    background-color: #8d0700; 
 
    color: #fff; 
 
} 
 

 
.bottomborder { 
 
    border-bottom: 5px solid #000; 
 
} 
 

 
.topborder { 
 
    border-top: 5px solid #000; 
 
} 
 

 
.name .left { 
 
    padding-left: 10px; 
 
} 
 

 
.name .right { 
 
    float: right; 
 
    margin-right: 10px; 
 
}

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" /> 
 
<div class="w3-container w3-row-padding indexcontainer"> 
 
    <div class="items"> 
 
    <div class="w3-col l3 item"> 
 
     <div class="name bottomborder"> 
 
     <h3 class="right">Die Casting and Machining</h3> 
 
     </div> 
 
     <div class="image"> 
 
     <img src="http://via.placeholder.com/200x200"> 
 
     </div> 
 
    </div> 
 
    <div class="w3-col l3 item"> 
 
     <div class="image"> 
 
     <img src="http://via.placeholder.com/200x200"> 
 
     </div> 
 
     <div class="name topborder"> 
 
     <h3 class="left">Plastic Injection Products</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

可以使用pseudoelements实现这一目标。

您可以根据需要调整位置。我在这里使用calc()来考虑边界的宽度。

.item { 
 
    flex: 1; 
 
    background: #8d0700; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    padding: 0px; 
 
    width: 250px; 
 
    border: 5px solid #000; 
 
} 
 

 
.image img { 
 
    width: auto; 
 
    height: 450px; 
 
    outline: 2px solid rgba(218, 236, 255, 0.6); 
 
    outline-offset: -6px; 
 
} 
 

 
.name { 
 
    height: 100px; 
 
    text-overflow: wrap; 
 
    background-color: #8d0700; 
 
    color: #fff; 
 
} 
 

 
.bottomborder:after, 
 
.topborder:before { 
 
    content: ''; 
 
    width: 3em; 
 
    height: 3em; 
 
    background: black; 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
} 
 

 
.bottomborder { 
 
    border-bottom: 5px solid #000; 
 
    position: relative; 
 
} 
 

 
.bottomborder:after { 
 
    left: 3em; 
 
    bottom: calc(-1.5em - 3px); 
 
} 
 

 
.topborder { 
 
    border-top: 5px solid #000; 
 
    position: relative; 
 
} 
 
.topborder:before { 
 
    right: 3em; 
 
    top: calc(-1.5em - 3px); 
 
} 
 

 
.name .left { 
 
    padding-left: 10px; 
 
} 
 

 
.name .right { 
 
    float: right; 
 
    margin-right: 10px; 
 
}

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" /> 
 
<div class="w3-container w3-row-padding indexcontainer"> 
 
    <div class="items"> 
 
    <div class="w3-col l3 item"> 
 
     <div class="name bottomborder"> 
 
     <h3 class="right">Die Casting and Machining</h3> 
 
     </div> 
 
     <div class="image"> 
 
     <img src="http://via.placeholder.com/200x200"> 
 
     </div> 
 
    </div> 
 
    <div class="w3-col l3 item"> 
 
     <div class="image"> 
 
     <img src="http://via.placeholder.com/200x200"> 
 
     </div> 
 
     <div class="name topborder"> 
 
     <h3 class="left">Plastic Injection Products</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>