3

Подскажите пожалуйста, есть ли какой приём, чтобы скруглить углы, как на картинке у серого фона http://joxi.ru/l2Z61exIwOkzW2 ?

Буду очень благодарен. введите сюда описание изображения

Grundy
  • 81,538
Виталик Бойко
  • 45

2 Answers2

3
border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном. Разрешается использовать одно, два, три или четыре значения, перечисляя их через пробел. Также допустимо писать два значения через слэш (/). В качестве значений указываются числа в любом допустимом для CSS формате. В случае применения процентов, отсчет ведется относительно ширины блока.

Пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head> 
 <body> 
  <div style="border-radius: 50px 0 0 50px;" class="radius">
   border-radius: 50px 0 0 50px;
  </div>
  <div style="border-radius: 40px 10px" class="radius">
   border-radius: 40px 10px;
  </div>
  <div style="border-radius: 10em/1em;" class="radius">
   border-radius: 13em/3em;
  </div>
  <div style="border-radius: 13em 0.5em/1em 0.5em;" class="radius">
   border-radius: 13em 0.5em/1em 0.5em;
  </div>
  <div style="border-radius: 8px;" class="radius">
   border-radius: 8px;
  </div>
 </body> 
</html>
Aliaksandr Pitkevich
  • 1,325
  • в чем разница между пробелом и / при указании значения? – Grundy May 17 '17 at 09:03
  • Если будем значение указывать через / то, первое значение задаст радиус по горизонтали, а второе по вертикали (два значения через / задаются) – Aliaksandr Pitkevich May 17 '17 at 09:06
  • @Aliaksandr Pitkevich Про радиус я знаю, но проблема в том, что следующая секция должна заходить частично на предыдущую – Виталик Бойко May 17 '17 at 09:21
0

Решение По клику на jsFF

.parent {
  width: 300px;
  height: 200px;
  background: #000;
  position: relative;
  left:50px;
  overflow: hidden;
}
.parent:after {
  content:"";
  width:120%;
  height: 50px;
  position: absolute;
  bottom:0;
  left:-10%;
  background: blue;
  border-radius:100% 100% 0 0;
}
MoJlo4HuK
  • 1,230