Как сделать отрезанный вид круга из div с тенью - PullRequest
Новая
       4

Как сделать отрезанный вид круга из div с тенью

0 голосов
/ 25 марта 2020

Итак, у меня есть div с тенью блока, значение "box-shadow: 0 0 3px 0 rgba (0, 0, 0, 0.3);" и цвет фона белый. Слева вы не можете видеть вид обрезанного круга с изображением, между кругом и большим делителем должен быть прозрачный фон, я имею в виду, что вы должны видеть сквозь него.

при наведении отрезанный круг превращается в вид прямоугольника, как вы можете видеть. и граница слева от div меняет свой радиус, как вы можете видеть. Я просто не могу этого сделать, я подумал, что, может быть, я смогу просто получить обрезанную большую фигуру Div в качестве SVG и использовать ее в качестве фонового изображения, но это не будет так хорошо, потому что при зависании нужно переключать фоновые изображения, и у меня не будет эффект, когда граница меняет свою форму. это правильная форма это при наведении

1 Ответ

0 голосов
/ 26 марта 2020

Что ж, если вам не нравится SVG, думаю, вы могли бы сделать это так, но оно должно быть прозрачным для реального: 

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .wrapper{
        position: relative;
        margin: 2em;
      }
      .box1{
        position:relative;
        height: 6em;
        margin-left: 3em;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 0 3px rgba(0,0,0,0.3);
      }
      .box1:before{
        content: ' ';
        display: block;
        position: absolute;
        top: 0.5em;
        left: -2.5em;
        height: 5em;
        width: 5em;
        background: #fff;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
        border-radius: 50%;
        transition: all 0.5s;
      }
      .box1cover{
        position: absolute;
        left:0;
        top:0.5em;
        width: 3em;
        height: 5em;
        background: #fff;
      }
      .box2{
        position: absolute;
        top: 1em;
        left: 1em;
        height: 4em;
        width: 4em;
        background: #fff;
        box-shadow: 0 0 3px rgba(0,0,0,0.3);
        border-radius: 50%;
        transition: all 0.5s;
      }
      .wrapper:hover .box1:before, .wrapper:hover .box2{
        border-radius: 30%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
     <div class="box1">&nbsp;</div>
     <div class="box1cover">&nbsp;</div>
     <div class="box2">&nbsp;</div>
    </div>
  </body>
</html>
...