Я пытаюсь сделать границу своей коробки, чтобы она указала на сторону экрана. Любое предложение?

Question

Здесь демо: https://codesandbox.io/s/stupefied-hoover-i8lqd

В демоверсии вы можете видеть, что границы control_group указывают на центр div, как показано ниже image:

В 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

Я бы выбрал комбинацию радиального градиента / линейного градиента для достижения этого:

.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>

Answer 2

Можно использовать псевдоэлементы :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);
}