Перевернутые скругленные углы с помощью CSS

ProgramBox

Перевернутые скругленные углы с помощью CSS

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#css

Вопрос:

У меня есть CSS-код

 #box {
  width: 200px;
  height: 50px;
  background-color: blue;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  position: relative;
  margin: 30px;
  text-align: center;
  color: white;
  padding-top: 10px;
}

#box::before,
#box::after {
  content: "";
  width: 0;
  height: 0;
  right: 0;
  position: absolute;
}

#box::before {
  border-right: 10px solid blue;
  border-top: 10px solid blue;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  bottom: -20px;
}

#box::after {
  border-right: 10px solid blue;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid blue;
  position: absolute;
  top: -20px;
}

 <div id="box">#box</div>

что придает некоторую форму, например

форма, которая мне нужна, это

Мне нужна изогнутая линия вместо гипотенузы в треугольниках вверху справа ( #box::before ) и внизу справа ( #box::after ), как на изображении.

Есть ли какой-либо способ добиться этого с помощью чистого CSS ?

демо-версия codesandbox

Спасибо

1. Хей, посмотри, хочешь ли ты этого, #box::перед { … граница-внизу справа-радиус: 75%; } #поле::после { … граница-вверху справа-радиус: 75%;

2. @theVoogie Нет! это придает какую-то странную форму

3. Не могли бы вы, пожалуйста, добавить изображение фигуры, которую вы хотите.

Ответ №1:

Вы можете создать вогнутый радиус, используя свойство box-shadow.

Этот метод создает транспарантный квадрат со скрытым переполнением.
Затем он создает транспарантный круг с тенью прямоугольника.
Затем мы изменяем положение круга, чтобы видеть только 1 его четверть.

отрывок

 #box {
  position: relative;
  width: 200px;
  height: 50px;
  background-color: blue;
  border-radius: 9999px 0 0 9999px;
  margin: 30px;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}

#top,
#bottom {
  position: absolute;
  height: 30px;
  width: 30px;
  right: 0;
  overflow: hidden;
}

#top {
  top: -30px;
}

#bottom {
  bottom: -30px;
}

#top::before,
#bottom::before {
  content: '';
  position: absolute;
  right: 0;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px blue;
  z-index: -1;
}

#top::before {
  top: -100%;
}

 <div id="box">
  <div id="top"></div>
  #box
  <div id="bottom"></div>
</div>

1. Привет, спасибо за ответ. Можно ли обойтись без дополнительных элементов ? Просто используя ::after и ::before

2. К сожалению, нет. Эта техника нуждается в двух элементах. Первый для создания границы переполнения, а второй для создания радиуса.

Ответ №2:

Вы можете легко достичь этого, используя фоновые изображения svg, как в этом фрагменте. Здесь кривые могут быть не такими, как вы хотите, но, безусловно, вы можете изменить путь в svg в соответствии с вашими потребностями.

 #box {
  width: 200px;
  height: 50px;
  background-color: blue;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  position: relative;
  margin: 30px;
}

#box::before,
#box::after {
  content: "";
  width: 20px;
  height: 20px;
  right: 0;
  position: absolute;
}

#box::before {
  background-image: url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');
  bottom: -20px;
}

#box::after {
  background-image: url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');
  top: -20px;
}

 <div id="box"></div>

Ответ №3:

Можете ли вы использовать отрицательное пространство? Вы можете создать контейнер с тем же цветом фона, что и ваша фигура, а затем закруглить углы, окружающие элементы, чтобы создать иллюзию.

 .container {
  background-color: blue;
  width: 100%;
}

.negat {
  background-color: white;
  height: 100px;
}

.posit-bg {
  background-color: white;
}

.posit {
  background-color: blue;
  height: 100px;
  border-radius: 50px 0px 0px 50px;
}

.top {
  border-radius: 0px 0px 50px 0px;
}

.bot {
  border-radius: 0px 50px 0px 0px;
}

 <div class="container">
  <div class="negat top"></div>
  <div class="posit-bg">
    <div class="posit"></div>
  </div>
  <div class="negat bot"></div>
</div>

1. У этого есть белый фон, а не прозрачный. Если синяя вкладка помещена поверх другого слоя, она замаскирует нижележащий слой. Так что это не будет соответствовать каждой ситуации.

Ответ №4:

 #box{
  width:200px;
  height:50px;
  background-color:blue;
  color:#ffffff;
  text-align:center;
  padding-top:30px;
  border-radius:9999px 0 0 9999px;
}
.sq{
  width:25px;
  height:25px;
  background-color:blue;
}
#sq1,#sq2,#sq11,#sq22{
  border-radius:-999px;
  margin-left:175px;
}
.sq1{
  background-color:#ffffff;
  height:25px;
  width:25px;
}
#sq11{
 border-bottom-right-radius:9999px;
  margin-bottom:-25px;
  position: relative;
  z-index:1;
}
#sq22{
 border-top-right-radius:9999px;
 margin-top:-25px;
 position: relative;
 z-index:1;
}

 <div class="sq1" id="sq11"></div>
<div class="sq" id="sq1"></div>
<div id="box">#box</div>
<div class="sq" id="sq2"></div>
<div class="sq1" id="sq22"></div>

Метки: Перевернутые скругленные углы с помощью CSS