Добавить кнопку на полигоне в SVG - PullRequest
Новая
       19

Добавить кнопку на полигоне в SVG

1 голос
/ 01 мая 2020

У меня svg в нижней части, и я хочу иметь кнопку в нижней строке.

и быть отзывчивым.

То, чего я хочу достичь, это:

enter image description here

Возможно ли это с css и как мне этого добиться? 

.container {
  position: absolute;
  width: 100vw;
  height: 500px;
  top: 0;
  z-index: -1;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: green;
}
	<div class="container">
	<svg viewBox="0 0 40 100" preserveAspectRatio="none">
		<polygon points="0,0 40,0 40,100 0,80" />
	</svg>
</div>

1 Ответ

0 голосов
/ 01 мая 2020

, пожалуйста, проверьте этот ответ:

кодовое имя: - https://codepen.io/Rishab2019/pen/LYpzxKw

.container {
  position: absolute;
  width: 100vw;
  height: 500px;
  top: 0;
  z-index: -1;
}

#t1{
  position:inherit;
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:400px;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:400px;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:400px;
}

#t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:700px;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: green;
}

.mybutton{
  color:white;
  background-color:#e6c619;
  border:none;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  border-radius:20px;
  width:160px;
  height:40px;
  margin-left:30%;
  margin-top:405px;
  cursor:pointer;
  box-shadow: 0 2px 5px 0px grey;
  -moz-box-shadow: 0 2px 5px 0px grey;
  -webkit-box-shadow: 0 2px 5px 0px grey;
}



@media all and (max-width:768px){
  
  .mybutton{
    width:140px;
    margin-top:411px;
    
  }
  
}


@media all and (min-width:620px) and (max-width:940px){
#t1{
  position:relative;
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:20.7%;
}
  
  #t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
  
}


@media all and (max-width:619px){
#t1{
  margin-top:-350px;
  color:white;
  font-size:40px;
  margin-left:50px;
}
#t2{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:50px;
}

#t3{
  
  margin-top:0px;
  color:white;
  font-size:40px;
  margin-left:50px;
}
  
  #t4{
  
  margin-top:-125px;
  margin-bottom:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}

#t5{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
#t6{
  
  margin-top:0px;
  color:white;
  font-size:35px;
  margin-left:57.3%;
}
  
}
<div class="container">

	<svg viewBox="0 0 40 100" preserveAspectRatio="none">
		<polygon points="0,0 40,0 40,100 0,80" />
    </svg>

</div>
<button class="mybutton">LOGIN</button>
  <div id="t1">Some Text</div>
  <div id="t2">Some Text</div>
  <div id="t3">Some Text</div>
  <div id="t4">Some Text</div>
  <div id="t5">Some Text</div>
  <div id="t6">Some Text</div>

и он отзывчив.

...