Как прозрачный элемент в элементе css - PullRequest
Новая
       1

Как прозрачный элемент в элементе css

0 голосов
/ 08 апреля 2020

Сегодня я работаю над проектом, но я должен вычесть элемент в элементе, но как вы можете это сделать?

enter image description here

зеленый элемент должен быть вычтен. Но как ты можешь это сделать?

Спасибо за продвижение.

Ответы [ 2 ]

2 голосов
/ 08 апреля 2020

Используя некоторые CSS волхвы c, вы можете создать желаемую фигуру: 

.container {
  width: 300px;
  height: 750px;
  position: relative;
  background-color: lightgray;
}

.phone {
  position: absolute;
  border-radius: 25px;
  width: 250px;
  height: 700px;
  left: 25px;
  top: 25px;
  background-color: black;
}

.screen-top {
  width: 250px;
  height: 40px;
  left: 45px;
  top: 45px;
  position: relative;
  overflow: hidden;
  border-radius: 30px 30px 0 0;
}

.screen-top:before {
  z-index: 1;
  content: '';
  position: absolute;
  left: 15%;
  bottom: calc(100% - 30px);
  width: 70%;
  height: 100%;
  border-radius: 0 0 30px 30px;
  box-shadow: 0px 300px 0px 300px white;
}

.screen-bottom {
  position: absolute;
  top: 85px;
  left: 45px;
  width: 250px;
  height: 660px;
  border-radius: 0 0 30px 30px;
  background-color: white;
}
<div class="container">
  <div class="phone"></div>
  <div class="screen-top"></div>
  <div class="screen-bottom"></div>
  <div class="screen-content"></div>
</div>
0 голосов
/ 08 апреля 2020

Если вы можете (хотя бы приблизительно) получить размеры этой части телефона, вы можете решить ее с помощью css: 

body {
    background: goldenrod;
    height: 100vh /* optional */
} 

#map {
    position: relative; /* needed if #page != body */
    background: url(your/path/to/map);
    display: flex;
    justify-content: center; /* center the green elem horizontally */
    height: 100vh; /* optional */
}
#box {
   background: goldenrod; /* (color of page bg, so we hack transparency) */
   position: fixed; /* or absolute, as you need */
   top: 0; 
   width: 200px ; /* that phone part s width */
   height: 30px ; /* same workaround */
   border-bottom-left-radius: 30px;
   border-bottom-right-radius: 30px; /* the magic, complete with actual radius of phone part corner */
}

, и этот код должен остаться в силе: 

<body>
    <div id=map>
        <div id=box></div>
    </div>
</body>

добавление border-radius: 30px; на #page дает ему «телефонный» аспект

Надеюсь, это помогло :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...