Можно ли создать прямоугольник с его левой и правой сторонами в виде абсолютного круга с помощью CSS? - PullRequest
Новая
       1

Можно ли создать прямоугольник с его левой и правой сторонами в виде абсолютного круга с помощью CSS?

0 голосов
/ 12 июня 2018

Здесь то, что я пытаюсь создать, показано на изображении https://i.stack.imgur.com/qZIEJ.png

Я использовал border-radius, но это не помогло мне.то, что я сделал до сих пор, дано во фрагменте ниже: 

.button-holder{
    width:300px;
    height:100px;
}
.button{
    width:80%;
    height:65%;
    border-radius:50%;
    border:2px solid #000;
    background-color:#063755;
}
<div class="button-holder">
   <div class="button"></div>
</div>

Обратите внимание: - Я знаю, что можно получить фигуру путем объединения нескольких тегов <div>, но это мне не поможет.Я ищу ответ с одним тегом <div>.

Ответы [ 3 ]

0 голосов
/ 12 июня 2018

Вы можете использовать такие элементы psuedo: 

.button-holder {
  width: 300px;
  height: 100px;
  background-color: #063755;
  position: relative;
  margin: 0 auto;
}

.button-holder:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 33.33%; /* height/width */
  top: 0;
  left: -16.665%; /* 1/2 of the width */
  border-radius: 100%;
  background-color: #063755;
}

.button-holder:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 33.33%;
  top: 0;
  right: -16.665%;
  border-radius: 100%;
  background-color: #063755;
}
<div class="button-holder">

</div>
0 голосов
/ 12 июня 2018

Попробуйте это: 

<html>

<head>
  <style>
    #corner {
      border-radius: 100px 100px 100px 100px;
      background: #73AD21;
      padding: 20px;
      width: 400px;
      height: 150px;
    }
  </style>
</head>

<body>
  <p id="corner"></p>
</body>

</html>

вывод

0 голосов
/ 12 июня 2018

Вам нужно использовать половину высоты в px, а не %. 

.button-holder{
    width:300px;
    height:100px;
}
.button{
    width:80%;
    height:65%;
    border-radius:32.5px;  // 100px * 0.65 * 0.5 = 32.5px
    border:2px solid #000;
    background-color:#063755;
}
<div class="button-holder">
   <div class="button"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...