Hi folks!
How can I make a trapezoid shaped div scale responsively with decreasing screen size/width without losing its angle? See problem in video below. Codepen link here:https://codepen.io/IDCoder/pen/jvqdqv?editors=1100
CSS Code here:
/*...........Into stuf.............*/
.hideit{
position:relative;
width: auto;
height: 700px;
background-color: skyblue;
z-index: 1;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 60%);
clip-path: polygon(0 0, 100% 0, 100% 43%, 0 60%);
}
.about-me-premiere{
position:absolute;
width: auto;
z-index: 1;
/*border-left: 50px solid #555;
border-top: 0 solid transparent;
border-bottom: 9px solid transparent;
height: 300px;
width: 100%;
box-shadow: 5px 10px #888888;*/
margin-left: 30px;
transform: perspective(500px) rotateY(20deg);
top:10%;
}
.container {
margin-top: 20px;
margin-bottom: 20px;
height: 100%;
width: auto;
}
.about-me-holder{
position: relative;
border: solid 20px transparent;
border-radius: 40px;
margin-bottom: 10px;
box-shadow: 0 -1px 1px #eee, 0 2px 2px #1d1d1d, inset 0 0 1px #666, inset 0 1px .125em #8b8b8b, inset 0 2px .25em #a4a2a3, inset 0 -1px .125em #8b8b8b, inset 0 -2px .25em #a4a2a3, inset 0 0 0 .375em #cdcdcd;
background: repeating-radial-gradient(rgba(228, 228, 228, 0) 23px, rgba(228, 228, 228, 0.05) 25px, rgba(228, 228, 228, 0) 27px) content-box, repeating-radial-gradient(rgba(166, 166, 166, 0) 13px, rgba(166, 166, 166, 0.05) 15px, rgba(166, 166, 166, 0) 17px) content-box, repeating-radial-gradient(rgba(139, 139, 139, 0) 19px, rgba(139, 139, 139, 0.05) 21px, rgba(139, 139, 139, 0) 23px) content-box, conic-gradient(#cdcdcd, #9d9d9d, #808080, #bcbcbc, #c4c4c4, #e6e6e6, #dddddd, #a1a1a1, #7f7f7f, #8b8b8b, #bfbfbf, #e3e3e3, #d2d2d2, #a6a6a6, #858585, #8d8d8d, #c0c0c0, #e5e5e5, #d6d6d6, #9e9e9e, #828282, #8f8f8f, #bdbdbd, #e3e3e3, #cdcdcd) content-box, radial-gradient(#00d7ff 53%, transparent 65%, transparent 70%, #8b8b8b 70%) padding-box, radial-gradient(#272727 20%, transparent 25%) 0 0 / 1.25em 1.25em padding-box, radial-gradient(#272727 20%, transparent 25%) 0.625em 0.625em / 1.25em 1.25em padding-box, radial-gradient(#444 20%, transparent 28%) 0 0.125em / 1.25em 1.25em padding-box, radial-gradient(#444 20%, #3d3d3d 28%) 0.625em 0.75em / 1.25em 1.25em padding-box, conic-gradient(#b5b5b5, #8d8d8d, #838383, #ababab, #d7d7d7, #e3e3e3, #aeaeae, #8f8f8f, #878787, #acacac, #d7d7d7, #dddddd, #b8b8b8, #8e8e8e, #848484, #a6a6a6, #d8d8d8, #e3e3e3, #8e8e8e, #868686, #a8a8a8, #d5d5d5, #dedede, #b5b5b5) border-box;
}
.About-Me {
background-color: #0099ff;
border-radius: 20px;
box-shadow: inset 0px 5px 20px 0px #000;
width: auto;
position: relative;
}
.glass{
width: 100%;
height: 50%;
/*background-color: rgb(255,255,255,0.2);*/
background: rgba(113,206,239,0.41);
background: -webkit-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
background: -o-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
background: -ms-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
background: linear-gradient(to bottom, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71ceef', endColorstr='#b7deed', GradientType=0 );
/* for the following elements, rgba(183,222,237,0.41) 78%, 78% was changed to 100% */
position: absolute;
top: 0;
/*border-radius: 20px;*/
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
/*........Buttons.....................*/
#buttons{
position: absolute;
top: 450px;
background-color: skyblue;
width: 100%;
padding-top: 80px;
z-index: 2;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}
.myButton {
width: 250px;
height: 40px;
line-height: 1.75em;
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
box-shadow: 7px 7px 15px black;
transform: skew(25deg);
-o-transform: skew(-25deg);
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
background-color:#378de5;
}
.myButton:active {
position:relative;
top:1px;
}
.myButton > span{
display: inline-block;
transform: skew(25deg);
}
.dropbtn {
background-color: #4CAF50;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border: 1px dashed black;
}
.dropdown-content a:hover {background-color: #00ffff}
.dropdown:hover .dropdown-content {
display: block;
background-color: #f1f1f1;
}
.dropdown {
position: relative;
display: inline-block;
}
/*.............middle-section.......................*/
#firstParagraph{
-webkit-transform: skewY(10deg);
-moz-transform: skewY(10deg);
-ms-transform: skewY(10deg);
-o-transform: skewY(10deg);
transform: skewY(10deg);
margin-top: 40%;
transform: rotate(.20deg);
color: #ffffff;
font-size: 1.25em;
}
#secondParagraph{
-webkit-transform: skewY(10deg);
-moz-transform: skewY(10deg);
-ms-transform: skewY(10deg);
-o-transform: skewY(10deg);
transform: skewY(10deg);
margin-top: 40%;
transform: rotate(.20deg);
color: #ffffff;
font-size: 1.25em;
}
.holder {
max-width: 500px;
overflow: hidden;
position: relative;
height: 300px;
margin: auto;
}
div.Portfolio.Pics {
width: 3000px;
position: absolute;
overflow: hidden;
}
figure {
width:500px;
float:none;
overflow:hidden;
}
.Portfolio.Pics figure{
overflow: hidden;
height: 500px;
}
.Portfolio.Pics figure img{
width: 100%
float: left;
opacity: 0.65;
margin-top: 10px;
}
figure{
position: relative;
width: 100%;
margin: 0;
left: 0;
animation: 20s portfolio infinite;
cursor: pointer;
}
@keyframes portfolio {
0%{
left: -100%;
}
25%{
left:-50%;
}
50%{
left:-75%;
}
100%{
right:100%;
}
}
figure:hover {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
/*.........Connect and other info ..................*/
#middle-section{
background-color: skyblue;
margin-top: 20px;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}
#contact-form {
background-color: #0099ff;
padding: 10px 20px 30px 20px;
width: 400px;
position: relative;
border-radius: 20px;
margin-bottom: 10px;
box-shadow: inset 5px 0 10px -5px #ffffff, inset -5px 0 10px -5px #ffffff, inset 0px -5px 35px -7px #ffffff, 0 0 1px 1px, 0 10px 20px 0 #494547;
font-weight: bold;
/*color: #E5E6E7;*/
color: hsl(210, 100%, 40%);
text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
-webkit-transform: skewY(10deg);
-moz-transform: skewY(10deg);
-ms-transform: skewY(10deg);
-o-transform: skewY(10deg);
transform: skewY(10deg);
}
#contact-form .required {
font-weight: bold;
color: #E5E6E7;
}
#contact-form button[type="submit"] {
cursor:pointer;
width:100%;
border: none;
outline: none;
background:#e17f3f;
margin:0 0 5px;
padding:10px;
border-radius:5px;
box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #000;
}
#contact-form button[type="submit"]:hover {
background-color: #79bbff;
color: #e17f3f;
font-size: 1.5em;
}
#contact-form button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #e17f3f;
margin: 0 0 5px;
padding: 10px;
border-radius: 5px;
}
#contact-form input, #contact-form select, #contact-form textarea {
width: 100%;
background: #fff;
border: 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 25px;
padding: 5px;
}
h1 {
color: #ffffff;
margin: 10px 0 0 0;
font-size: 36px;
}
h4 {
color: #ffffff;
}
#skills {
width: 100px;
background-color: #0099ff;
line-height: .5em;
text-align: center;
font-size: 2em;
padding-top: 30px;
margin-top: 5px;
text-transform: uppercase;
color: #bfbdbd;
}
.notification {
position: absolute;
width: 30px;
height: 30px;
border-radius: 5px;
left: 63%;
background-color: #ff0000;
}
#number {
font-size: 1.5em;
line-height: 0;
position: absolute;
top: 16px;
left: 8px;
color: white;
}
#last-section{
background-color: skyblue;
margin-top: 20px;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}
#very-last-section{
height: 150px;
background-color: skyblue;
margin-top: 20px;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
}
.social-media-icon-footer{
margin-top: 3.5%;
width:500px;
background-color:white;
color: #0099ff;
height:80px;
border: 1px solid black;
border-radius: 15px;
text-align: center;
box-shadow: inset hsla(210,100%,100%,.7) 0 2px 1px 7px, /* top HL */ hsla(210,100%,75%, .8) 0 0px 3px 2px, /* outer SD */ hsla(210,50%,40%, .35) 0 -5px 6px 4px, /* outer SD */ hsla(210,80%,95%, 1) 0 5px 6px 4px;
}
.link-button-holder > a {
display: inline-table;
cursor: pointer;
text-decoration: none;
height: 100%;
width:100%;
}
.link-button-holder > a > h1 {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
color: #f7f8f8;
font-size: 12px;
font-family: cabinregular;
text-align: center;
}
div.contact {
padding: 0px;
margin-top:-20px;
/**background-color: black;**/
}
ul.soc {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
text-align: center;
width: 100%;
}
ul.soc li {
display: inline-block;
}
li.socbutton a {
background-color: #0099ff;
border: 1px solid white;
border-radius: 10px;
color: white;
text-decoration: none;
text-shadow: 2px 2px black;
font-size: 12px;
margin: 5px;
padding: 5px;
box-shadow: 7px 7px 5px black;
width: 300px;
}