What we need to make responsive CSS shapes is a unit that we can use with the border-width property that relates to the element’s own current width or height values. Imagine if you could tell CSS that a border should always be 20% of the element’s width! Here’s a CodePen pen using ew element-width units via a JS plugin that demonstrates what this could look like: http://codepen.io/tomhodgins/pen/YNKVMQ
One big problem when using shapes made from CSS is that any shapes that depend on using a
bordervalue becomes really tough to make responsive.What we need to make responsive CSS shapes is a unit that we can use with the
border-widthproperty that relates to the element’s own currentwidthorheightvalues. Imagine if you could tell CSS that a border should always be 20% of the element’s width! Here’s a CodePen pen usingewelement-width units via a JS plugin that demonstrates what this could look like: http://codepen.io/tomhodgins/pen/YNKVMQ