как сделать полукруг в css. (без рамки и контура) - PullRequest
Новая
       5

как сделать полукруг в css. (без рамки и контура)

3 голосов
/ 02 августа 2020

Я пытался сделать полукруг в css. (без рамки и выхода)

Я тоже пробовал это, но не смог 

clip-path: circle(100% at 0%);

Ответы [ 4 ]

3 голосов
/ 02 августа 2020

Я попытался изменить clip-path на 50%, а также у вас должны быть ширина и высота элемента. 

.wrapper{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.semi-circle{
  width: 100px;
  height: 100px;
  background-color: green;
  clip-path: circle(50% at 0%);
}
 <div class="wrapper">
  <div class="semi-circle">
  </div>
 </div>

Высота и ширина равны, что тоже важно. Надеюсь, это помогло :)

0 голосов
/ 02 августа 2020 
    <!DOCTYPE HTML>
    <html>
         <head>
              <style>
                     .semicircle:before {
                       content: "";
                       height: 100px;
                       width: 100px;
                       border-radius: 50%;
                       position: absolute;
                       background-color: #eee;
                     }

                     .semicircle {
                       position: relative;
                       height: 50px;
                       width: 100px;
                       overflow: hidden;
                     }
              </style>
       </head>
       <body>
            <div class="semicircle"></div>
       </body>
</html>

Надеюсь, работает.

0 голосов
/ 02 августа 2020

Вы можете использовать холст для создания практически любой формы. Попробуйте опору холста .ar c (). .ar c (x, y, r, startAngle, endAngle) где: x: координата x центра окружности y: координата y центра окружности r: радиус окружности startAngle: начальный угол в радианах до нарисовать дугу endAngle: конечный угол в радианах, чтобы нарисовать ар c

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.arc(100, 100, 50, 0*Math.PI,Math.PI, false);
      context.closePath();
      context.fillStyle = 'red';
      context.fill();
    </script>
  </body>
</html>

Вот ссылка jsfiddle для того же: https://jsfiddle.net/khushboo097/skoqr28w/7/

0 голосов
/ 02 августа 2020

Я не уверен, что это то, что вам нужно, но вы можете использовать что-то вроде этого: 

#circle {
  background-color: black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

#container {
  width: 50px;
  overflow: hidden;
}
<div id="container">
  <div id="circle"></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...