Question

我有一个包含一些文字的div元素。我想在左上角和右下角添加边框，以创建盾牌或波峰轮廓效果，类似于以下内容;

如果可能的话，我也希望边界能够做出回应。我很难搞清楚如何做到这一点。

Here是我创建的小提琴的链接。

到目前为止我的代码是;

#mainDiv {
  height: 500px;
  width: 500px;
  position: relative;
  border-top: 10px solid black;
  background: #3beadc;
}

.borderLeft {
  border-left: 10px solid black;
  position: absolute;
  top: 0;
  bottom: 50%;
}

<div id="mainDiv">
  <div class="borderLeft">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit quis est vel fringilla. Quisque eget tellus sed est vulputate varius. Quisque scelerisque lobortis molestie. Ut libero lorem, consequat quis commodo et, porttitor et sapien.
      Donec tristique purus eget nunc tincidunt ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque pharetra. Donec imperdiet ex metus. Vestibulum nulla ligula, semper vel odio ut, ornare pellentesque arcu. Sed
      neque lectus, fermentum non ultricies id, sollicitudin eget turpis.</p>
  </div>
</div>

感谢任何帮助。

Answer 1

您可以使用:before和:after伪元素来创建小边框。也许不是最好的方式，但它有效：

#mainDiv {
  height: 500px;
  width: 500px;
  position: relative;
  padding: 10px 15px;
  background: #3beadc;
  border-radius: 0 0 100px 0;
}

#mainDiv:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border-top: 10px solid black;
  border-left: 10px solid black;
}

#mainDiv:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 100px;
  border-bottom: 10px solid black;
  border-right: 10px solid black;
  border-radius: 0 0 100px 0;
}

<div id="mainDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit quis est vel fringilla. Quisque eget tellus sed est vulputate varius. Quisque scelerisque lobortis molestie. Ut libero lorem, consequat quis commodo et, porttitor et sapien.
      Donec tristique purus eget nunc tincidunt ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque pharetra. Donec imperdiet ex metus. Vestibulum nulla ligula, semper vel odio ut, ornare pellentesque arcu. Sed
      neque lectus, fermentum non ultricies id, sollicitudin eget turpis.</p>
</div>

Answer 2

你应该尝试将伪元素:before和:after应用于单个div。你可以这样做：

div {
    width: 200px;
    height: 200px;
    position: relative;
} 

div:before, div:after {
  content: '';
  position: absolute;
  height: 50px;
  width: 50px;
}

div:before {
  top: 0;
  left: 0;
  border-left: solid 2px red;
  border-top: solid 2px red;
}

div:after {
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 25px;
  border-right: solid 2px red;
  border-bottom: solid 2px red;
}

还有working fiddle。

Answer 3

由于已经提出了伪元素解决方案，这里是另一个通过使用多个线性/径向渐变背景来实现这些边界而不需要添加额外元素，因为它将是块的一部分，因为它是背景。 / p>

您将需要3个元素：

底部/右侧弯曲边框的径向渐变
顶部实线的线性渐变
左实线的线性渐变

您可以轻松调整每个背景的尺寸和位置：

#mainDiv {
  height: 200px;
  width: 500px;
  position: relative;
  padding: 10px 20px;
  border-radius: 0 0 80px 0;
  background-color: #3beadc;
  background: 
linear-gradient(to right, #000 50%, transparent 50%) 0px 0px / 20px 50px no-repeat, 
linear-gradient(to right, #000 50%, transparent 50%) 0px 0px / 90px 10px no-repeat, 
radial-gradient(circle at top left, transparent 29%, #000 30%) 130% 100%/34% 34% no-repeat, 
#3beadc
}

<div id="mainDiv">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit quis est vel fringilla. Quisque eget tellus sed est vulputate varius. Quisque scelerisque lobortis molestie. Ut libero lorem, consequat quis commodo et, porttitor et sapien. Donec
    tristique purus eget nunc tincidunt ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque pharetra. Donec imperdiet ex metus. Vestibulum nulla ligula, semper vel odio ut, ornare pellentesque arcu. Sed neque
    lectus, fermentum non ultricies id, sollicitudin eget turpis.</p>
</div>

如果你想要更多

您还可以使用此解决方案轻松地向另一个角添加更多边框：

#mainDiv {
  height: 200px;
  width: 500px;
  position: relative;
  padding: 10px 20px;
  border-radius: 0 0 80px 0;
  background-color: #3beadc;
  background: 
linear-gradient(to right, #000 50%, transparent 50%) 0px 0px / 20px 50px no-repeat, 
linear-gradient(to right, #000 50%, transparent 50%) 0px 0px / 90px 10px no-repeat,
linear-gradient(to right, #000 50%, transparent 50%) 0px 100% / 90px 10px no-repeat,
linear-gradient(to right, #000 50%, transparent 50%) 0px 100% / 20px 50px no-repeat,
linear-gradient(to right, transparent 50%, #000 50%) 100% 0px / 90px 10px no-repeat,
linear-gradient(to right, transparent 50%, #000 50%) 100% 0px / 20px 50px no-repeat,
radial-gradient(circle at top left, transparent 29%, #000 30%) 130% 100%/34% 34% no-repeat,
#3beadc
}

<div id="mainDiv">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit quis est vel fringilla. Quisque eget tellus sed est vulputate varius. Quisque scelerisque lobortis molestie. Ut libero lorem, consequat quis commodo et, porttitor et sapien. Donec
    tristique purus eget nunc tincidunt ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque pharetra. Donec imperdiet ex metus. Vestibulum nulla ligula, semper vel odio ut, ornare pellentesque arcu. Sed neque
    lectus, fermentum non ultricies id, sollicitudin eget turpis.</p>
</div>

Answer 4

您可以像这样创建像div一样的盾牌 https://codepen.io/proevilz/pen/QaqNQx

＆＃13;

.main {
	width:200px;
	height:200px;
	position:relative;
	top:-180px;
}
.main p {
	text-align:center;
	margin:0;
}
.left {
	width:100px;
	position:relative;
	height:200px;
	left:2px;
	border-bottom-left-radius:100px;
	border-left:1px solid red;
	border-bottom:1px solid red;
	border-top: 1px solid red;
	display:inline-block;
}
.right {
	position:relative;
	    border-top: 1px solid red;
	display:inline-block;
	width:100px;
	height:200px;
	right:2px;
	border-bottom-right-radius:100px;
	border-right:1px solid red;
	border-bottom:1px solid red;
}

＆＃13;

<div class="left"></div>
<div class="right"></div>
<div class="main">
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quibusdam corporis dolor nesciunt repellendus perspiciatis temporibus rem.</p>
</div>

＆＃13;

Answer 5

您可以使用其他绝对位置元素添加边框：

<div id="mainDiv">
  <div class="cornerBorder"></div>
  <p>Shield borders</p>
  <div class="roundedBorder"></div>
</div>

android:screenOrientation="sensorLandscape"

CSS Border DIV作为一个形状

5 个答案:

如果你想要更多