How Can I Make the Trapezoid Shaped Div Scale Responsively Without Losing its Angle?

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

Sep%2026%202018%201_50%20PM%20-%20Edited

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;
}

And this is a prime example of why I roll my eyes when people say that you don’t need to know math.

1 Like

@ArielLeslie, I know math…I’m good up to college algebra…I know the portion of the clip path that determines the behaviors, but isn’t there a way that it can decrease in width with screen size and keep the angle? It would take way too much media queries to get it behave correctly responsively…

I’m not suggesting that you don’t know math, just pointing out that these problems are math problems of the kind that come up all the time.

1 Like

Hahaha…it’s all good…I know there has to be a shortcut somewhere where the math is already automated into a formula…hopefully someone knows…:persevere:

If you need to keep an angle the same, then you need to preserve the ration of the two sides of the triangle. You are sizing the width and height of the the polygon based on their container, not each other.

It’s a trapezoid, but how do I preserve the ratio? This is my clip path code:

clip-path: polygon(0 0, 100% 0, 100% 43%, 0 60%);

The left bottom point of the polygon is (0 68%), and the right bottom point of the polygon is (100% 0)…these determine the angle of the line…

Your shape is a trapezoid, angles exist in terms of triangles and when we are creating a shape like yours we want to think of it in terms of its component triangles. Consider this shape to be a rectangle with a triangle attached to it. This is a right triangle, so you can use Pythagoras.

2 Likes

Maybe what you’re not seeing is that when you resize the window as in the GIF, you are only changing the absolute pixel count of the x-axis. As Ariel has said, the polygon function you are using for your clip-path property is composed of rectangle on top, and right triangle below it. As proof that the y-axis isn’t changing, you can decrease the y-height of the window, and it won’t change. The height of the <div class="hideit"> that you have in the html is defined statically as 700px in the css. You need to be able to do one of two things:

  1. Define the y-height of the <div class="hideit"> dynamically in proportion to the current width of the viewport.
  2. Define the third point in your clip path (currently 100% 43%) dynamically in proportion to the current width of the viewport.

There is no way to do this in CSS alone, because CSS variables are handled by the PREprocessor. I ran into a parallel issue myself a while back. You need Javascript to be able to modify the styling in response to viewport changes. And you need to use algebra and the Pythagorean theorem or trigonometric functions in order to figure out where to set that 3rd point’s y-coordinate. Good luck!

1 Like

OMG! Holy crap!! You mean it’s that complicated!? Man I’m trying to fancy up my website ASAP! :disappointed_relieved::disappointed_relieved::cry::cry::sob::sob:

I can’t tell if you’re being serious. It’s not that complicated, you just have to learn how to do it in Javascript. Your website claims the following skills:
Javascript programming
Application logic
3rd-party API calls
DOM manipulation
User experience design
User interface design
Responsive design
Advanced CSS
Animation
CSS-Grid Technology
Bootstrap
Advanced HTML

Make it true.

True, but there are different levels to javascript as well as different areas…but I’ll figure out a way to make it work…thanks alot for the help!

JS viewport width:
http://ryanve.com/lab/dimensions/

Javascript styling:
https://www.w3schools.com/js/js_htmldom_css.asp

It took literally 10 seconds to google and click two links. Man up.

I was just about to do some Googling. At any given time I’m usually working on multiple different projects…from a Javascript logic project, to a React app, to a start-up company’s project…so sometimes I write questions hurriedly…and have a lack of patience. Thankyou for your help. I will be reviewing the links you provided shortly. In addition, what was the query you typed that gained you those two links? Thanks again!

How old are you? ASAP means something. You spend more effort complaining about how hard things are than tackling them. It’s something you might want to work on.

no need for the condescension

You put in so much effort into emojis, and your speech patterns are those of a teenager, and a young one at that. I’m not being condescending, but when you ask for help from adults and use words like ASAP, it means something. Good luck out there. I’m unfollowing this thread.

The original concern of this topic has been addressed and the conversation in this topic no longer seems to be helpful or productive. I am locking this topic to preserve its usefulness.