如何显示左、右和底部边框 100% 以及顶部边框 40%

Question

我有一个带边框的框，里面有文字。现在我必须显示唯一的半上边框，如下图所示。我怎样才能做到这一点？我在 class 之后和之前都尝试过，但现在如何显示左右边框？

h2 {
  margin: 0;
  padding: 0;
}

.heroContent {
  position: relative;
  width: 400px;
}

.heroContent:before,
.heroContent:after {
  content: "";
  width: 100%;
  display: block;
  background-color: #f4d03f;
  position: absolute;
  height: 3px
}

.heroContent:after {
  bottom: 0;
}

.heroContent:before {
  top: 0;
  width: 40%;
}

<div class="heroContent">
  <h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>

Answer 1

你需要给 heroContent class 一个 border-left 和一个 border-right.

像这样：

border-left: 3px solid #f4d03f;
border-right: 3px solid #f4d03f;

h2 {
  margin: 0;
  padding: 0;
}

.heroContent {
  position: relative;
  width: 400px;
  border-left: 3px solid #f4d03f;
  border-right: 3px solid #f4d03f;
}

.heroContent:before,
.heroContent:after {
  content: "";
  width: 100%;
  display: block;
  background-color: #f4d03f;
  position: absolute;
  height: 3px
}

.heroContent:after {
  bottom: 0;
}

.heroContent:before {
  top: 0;
  width: 40%;
}

<div class="heroContent">
  <h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>

Answer 2

您可以简单地添加：

.heroContent {
  border-left: solid 3px #f4d03f;
  border-right: solid 3px #f4d03f;
}

See fiddle

Answer 3

使用标准边框创建其他 3 个边框。使用 pseudo-element (:before):

创建顶部边框

h2 {
  margin: 0;
  padding: 0;
}

.heroContent {
  position: relative;
  width: 400px;
  border-color: #f4d03f;
  border-width: 0 3px 3px;
  border-style: solid;
}

.heroContent:before {
  content: '';
  top: 0;
  left: -1px;
  width: 40%;
  display: block;
  background-color: #f4d03f;
  position: absolute;
  height: 3px
}

<div class="heroContent">
  <h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>

另一种选择是使用线性渐变作为背景来创建部分边框：

h2 {
  margin: 0;
  padding: 0;
}

.heroContent {
  position: relative;
  width: 400px;
  border-color: #f4d03f;
  border-width: 0 0 3px 3px;
  border-style: solid;
  background:
    linear-gradient(to right, #f4d03f 40%, transparent 40%) no-repeat,
    linear-gradient(to bottom, transparent 60%, #f4d03f 60%) no-repeat;
  background-size: 100% 3px, 3px 100%;
  background-position: top left, top right;
}

<div class="heroContent">
  <h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>

Answer 4

div {
        width: 500px;
        /* height: 100px; */
        position: relative;
        padding-top: 20px;
        margin-top: 50px;
        border: 1px solid red;
          border-top: none;
          padding:10px;
    }

 div::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        width: 30%;
        left: 0%;
         
        border-top: 1px solid red;
    }

<div>
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.    
</div>

Answer 5

只需添加到 h2

h2{    
  border: 3px solid #f4d03f;
  border-top: none;
  border-bottom: none;
}

h2 {
  margin: 0;
  padding: 0;
  border: 3px solid #f4d03f;
  border-top: none;
  border-bottom: none;
}

.heroContent {
  position: relative;
  width: 400px;
}

.heroContent:before,
.heroContent:after {
  content: "";
  width: 100%;
  display: block;
  background-color: #f4d03f;
  position: absolute;
  height: 3px
}

.heroContent:after {
  bottom: 0;
}

.heroContent:before {
  top: 0;
  width: 40%;
}

<div class="heroContent">
  <h2>Lorem ipsum dolor sit amet, consectetur</h2>
</div>

如何显示左、右和底部边框 100% 以及顶部边框 40%

How to display left,right and bottom border 100% and top border 40%

html

css

border