主页 / 问题 / 1595089
Accepted
михаил старков
Asked:2024-09-28 08:27:55 +0000 UTC2024-09-28 08:27:55 +0000 UTC

如何设置边框块，使左边的线为内容的高度，顶部和底部（水平）的长度为30px？

  • 772

各位专家，告诉我如何实现这个任务：有一个块，需要设置这个块：

  • 左边框
  • 边框顶部
  • border-bottom
    让事情变得更复杂（对我来说）的是顶部和底部边框必须是 30px 长。
    我得到了跨越块的整个宽度的顶部和底部边框。
    左边框应该是内容的高度。
css

1 个回答

  1. Best Answer

    https://codepen.io/KopteLove/pen/oNKXmKB

    .block {
  width: 200px;
  background-color: gray;
  position: relative;
  padding: 10px;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 30px;
    border-top: 5px solid red;
    border-bottom: 5px solid red;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-left: 5px solid red;
    border-right: 5px solid red;
  }
}
    <div class="block">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sollicitudin faucibus laoreet. Mauris lacinia mauris eget fermentum blandit. Sed ut elementum eros. Morbi pretium at lorem blandit fringilla. Nam efficitur velit eu lectus rhoncus molestie. Duis eu enim eu dolor tempor lobortis. Vivamus ornare urna dictum lectus luctus, eu tristique lacus suscipit. Nam venenatis enim arcu, ut molestie orci tempus in. Donec quis tempus dui. Phasellus pulvinar ut diam a posuere. Nam mollis tristique vehicula.
</div>

    • 0

相关问题