css - 带正方形的边框

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

您可以使用伪元素实现这一点。

您可以根据需要调整位置。我在这里使用 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>