CSS边界的一半

Question

我有问题。我希望得到一个像这个图像边框边界的结果。

我指的是身体和页脚的边界。它们在两侧是不完整的。我有两个解决方案。一个有图像，但我不想使用图像。第二个是在边界上使用两个div。我错过了其他任何方式吗？

Answer 1

最简单的方法是使用:before或:after伪元素，并为其设置一个高度。

.bordered:before {
  border: 3px solid green;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  content: "";
  /* for before/after elements to be visible,
     you must specify a position or size for them, and content: ""
  */
}

.footer {
  position: relative;
  padding: 20px;
}

.content {
  position: relative;
  padding: 20px;
}

<div class="content bordered">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque ornare augue, eget aliquam erat placerat vel. Cras eu volutpat dui. Cras enim arcu, molestie sed interdum tincidunt, molestie in enim. Suspendisse sit amet lectus in ligula venenatis aliquam eget in massa. Duis dignissim tincidunt elementum. Praesent molestie eget ante non facilisis. Fusce convallis sem eget ex suscipit, eget sagittis elit vulputate.

Curabitur et vestibulum lectus, ultricies imperdiet lacus. Proin sagittis nisi non augue molestie posuere. Nullam eu molestie nisl, at ullamcorper sapien. Morbi quis tortor semper, sollicitudin ante ut, elementum mauris. Sed semper nulla turpis, non pretium mi laoreet tempor. Donec tincidunt, velit eu egestas laoreet, lorem ante rhoncus quam, non condimentum nisi elit nec lorem. Quisque a sodales erat. Nulla velit tortor, viverra eget pharetra ac, tempus maximus nisl. Donec risus est, iaculis ac quam eu, sagittis ornare augue. Maecenas blandit molestie elit, sit amet ultricies ex faucibus a.

Nulla ultricies, arcu a lobortis accumsan, dolor massa gravida tortor, quis suscipit ante enim quis tellus. Aliquam hendrerit lorem ac diam maximus dapibus. Phasellus condimentum tortor egestas ex sagittis, ultrices fermentum enim eleifend. Quisque sed orci tincidunt, facilisis ligula id, condimentum augue. Cras lectus lacus, accumsan non orci id, mattis dignissim nulla. Integer ut lectus eu elit viverra pulvinar. Morbi arcu libero, egestas eget massa sed, fermentum vestibulum quam. Phasellus vestibulum mi sed scelerisque mattis. Nam sed erat mattis, tincidunt sapien eu, maximus turpis.

Vivamus quis mauris cursus odio tristique consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rutrum eros at purus condimentum, et iaculis ex auctor. Fusce ornare mattis aliquet. Vestibulum tincidunt blandit ligula, non porttitor lacus vulputate tristique. In ac molestie eros. Sed sapien elit, dictum ac turpis in, rutrum ornare lacus. Suspendisse vitae ex a ex maximus dignissim. Fusce turpis risus, finibus sed tempus at, gravida eget dui. Duis ut euismod dolor. Vestibulum condimentum sodales arcu ac ultrices.

Aliquam interdum, lectus et congue venenatis, turpis nibh blandit lorem, quis tempus lectus urna ut felis. Ut consequat purus ac purus vehicula, non posuere arcu lobortis. Quisque sed quam accumsan, pellentesque sapien nec, sodales leo. Praesent sollicitudin neque eu elit ultricies, vitae tincidunt massa fermentum. Nulla tristique lectus at massa auctor aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis rhoncus dui. Quisque ac lectus mauris. Sed ultrices quis orci vel pulvinar. Phasellus suscipit fermentum nunc eget pulvinar. Quisque sed vestibulum odio. Duis dignissim, ligula non luctus volutpat, turpis orci aliquam eros, nec ornare lectus lacus vitae odio.

</div>

<div class="footer bordered">
  Footer
</div>