我試圖讓我的盒子的邊界指向屏幕的一側。 有什么建議嗎？

Question

這里演示： https : //codesandbox.io/s/stupefied-hoover-i8lqd

在演示中，您可以看到control_group的邊框指向 div 的中心，如下圖所示：

在test_group ，我試圖反轉邊框，如下圖所示：

在閱讀了一些討論后，我嘗試以各種方式使用 before 元素，但我仍在尋找使邊框指向屏幕一側的正確方法-實際上，與原始框相反-。

如何使邊框指向屏幕？

這里是 ReactJS 片段：

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div>
      <div className="control_group"> 
        <h2>a superb reverse border</h2>
      </div>
      <div className="test_group"> 
        <h2>a superb reverse border</h2>
      </div>
    </div>
  );
}

這里是 CSS 的片段：

* {
  margin: 0;
  padding: 0;
}

/* control group */
.control_group {
  background: cyan;
  height: 40vh;
  width: 70%;
  margin: auto;
  margin-top: 10vh;
  margin-bottom: 20vh;
  font-family: sans-serif;
  text-align: center;

  /* flexbox just for cosmetic */
  display: flex;
  justify-content: center;
  align-items: center;
}

.control_group {
  position: relative;
  z-index: 100;
  border-left: solid 1.5vw black;
  border-right: solid 1.5vw black;
  border-radius: 1.5%;
  border-left: solid;
  border-right: solid;
  border-radius: 10px;
  border-width: 15px;
}

/* test group */
.test_group {
  position: relative;
  height: 40vh;
  width: 70%;
  margin: auto;
  margin-top: 10vh;
  margin-bottom: 20vh;
  font-family: sans-serif;
  text-align: center;
  background: yellow;

  /* flexbox just for cosmetic */
  display: flex;
  justify-content: center;
  align-items: center;
}

.test_group:before {
  content: "";
  width: 100%;
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  z-index: 1000;
  border-left: solid 1.5vw black;
  border-right: solid 1.5vw black;
  border-radius: 1.5%;
}

Answer 1

您可以偽元素:after和:before 。 :before在左邊， :after在右邊。 您需要將overflow: hidden添加到父元素。

/* test group */
.test_group {
  position: relative;
  height: 40vh;
  width: 70%;
  margin: auto;
  margin-top: 10vh;
  margin-bottom: 20vh;
  font-family: sans-serif;
  text-align: center;
  background: yellow;
  overflow: hidden;

  /* flexbox just for cosmetic */
  display: flex;
  justify-content: center;
  align-items: center;
}
.test_group:before,
.test_group:after {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1000;
  border-left: solid 12px black;
  border-right: solid 12px black;
  border-radius: 15px;
  height: 100%;
}
.test_group:before {
  left: calc(-100% - 12px);
}

.test_group:after {
  right: calc(-100% - 12px);
}

Answer 2

我會考慮徑向梯度/線性梯度的組合來實現這一點：

 .box { --b:20px; /* control the border */ --c:black; /* the color */ width:400px; box-sizing:border-box; margin:5px; /*control the distance from top and bottom*/ border-top:20px solid transparent; border-bottom:20px solid transparent; /**/ padding:10px calc(var(--b) + 5px); /* make sure the padding is at least equal to the borders */ background: radial-gradient(farthest-side at bottom right,var(--c) 98%,transparent 100%) top right /var(--b) var(--b), radial-gradient(farthest-side at bottom left ,var(--c) 98%,transparent 100%) top left /var(--b) var(--b), radial-gradient(farthest-side at top right,var(--c) 98%,transparent 100%) bottom right/var(--b) var(--b), radial-gradient(farthest-side at top left ,var(--c) 98%,transparent 100%) bottom left /var(--b) var(--b), linear-gradient(var(--c),var(--c)) left /var(--b) calc(100% - 2*var(--b)), linear-gradient(var(--c),var(--c)) right/var(--b) calc(100% - 2*var(--b)), yellow; background-repeat:no-repeat; }

 <div class="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit quam eu nisi convallis aliquam. Donec non fringilla massa. Praesent malesuada leo lorem, non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum. </div> <div class="box" style="--b:40px;--c:blue"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit quam eu nisi convallis aliquam. Donec non fringilla massa. Praesent malesuada leo lorem, non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum. malesuada leo lorem, non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum.malesuada leo lorem, non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum. </div> <div class="box" style="--b:10px;--c:red"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit quam eu nisi convallis aliquam. Donec non fringilla massa. Praesent malesuada leo lorem, non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum. malesuada leo lorem, non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum.malesuada leo lorem, non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum. </div>

為每個漸變使用不同的顏色來理解謎題：

 .box { --b:20px; /* control the border */ width:400px; box-sizing:border-box; margin:5px; /*control the distance from top and bottom*/ border-top:20px solid transparent; border-bottom:20px solid transparent; /**/ padding:10px calc(var(--b) + 5px); /* make sure the padding is at least equal to the borders */ background: radial-gradient(farthest-side at bottom right,red 98%,transparent 100%) top right /var(--b) var(--b), radial-gradient(farthest-side at bottom left ,blue 98%,transparent 100%) top left /var(--b) var(--b), radial-gradient(farthest-side at top right,green 98%,transparent 100%) bottom right/var(--b) var(--b), radial-gradient(farthest-side at top left ,purple 98%,transparent 100%) bottom left /var(--b) var(--b), linear-gradient(gray,gray) left /var(--b) calc(100% - 2*var(--b)), linear-gradient(black,black) right/var(--b) calc(100% - 2*var(--b)), yellow; background-repeat:no-repeat; }

 <div class="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse suscipit quam eu nisi convallis aliquam. Donec non fringilla massa. Praesent malesuada leo lorem, non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum.non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum.non fermentum nulla auctor bibendum. Cras eget vestibulum ipsum. Nullam iaculis auctor odio id condimentum. </div>