Geometric shape with css

Question

Geometric shape with css

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I needed to reproduce the image in css, I already tested some transform options and I can not stretch one end.

My question is how to get the bottom of the left and make it bigger down the right.

I did this in css with after and before it does not look good I just wanted to have a square and stretch one end, it should have some way by css

<html>
<body>
    <style>
        div { width: 320px; height: 335px; border: 1px solid blue; border-radius: 10px 10px 10px 0; position: relative; }
        div:before { content: ''; border-right: 318px solid transparent; border-top: 100px solid blue; position: absolute; bottom: -99px; left: -1px; }
        div:after { content: ''; border-right: 318px solid transparent; border-top: 100px solid white; position: absolute; bottom: -98px; }     
    </style>
    <div>

    </div>
</body>
</html>

css css3 transform

asked by anonymous 01.12.2017 / 18:49

2 answers

3

If SVG is an option, you can do it as follows:

<svg width="195" height="322" viewBox="0 0 195 322" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Vector</title>
<desc>SVG</desc>
<g id="Canvas" transform="translate(-117 121)">
<g id="Vector">
<use xlink:href="#path0_stroke" transform="translate(118 -120)"/>
</g>
</g>
<defs>
<path id="path0_stroke" d="M 177.435 276.505L 177.338 276.015L 177.327 276.017L 177.316 276.019L 177.435 276.505ZM 0 0.5L 174.323 0.5L 174.323 -0.5L 0 -0.5L 0 0.5ZM 174.323 0.5C 177.356 0.5 181.916 1.41225 185.704 4.13419C 189.467 6.83778 192.5 11.3478 192.5 18.6408L 193.5 18.6408C 193.5 11.0211 190.308 6.21076 186.288 3.32212C 182.293 0.45183 177.515 -0.5 174.323 -0.5L 174.323 0.5ZM 192.5 18.6408C 192.5 26.0971 192.5 86.6796 192.5 145.398C 192.5 174.757 192.5 203.65 192.5 225.204C 192.5 235.981 192.5 244.922 192.5 251.17C 192.5 254.294 192.5 256.744 192.5 258.413C 192.5 259.248 192.5 259.887 192.5 260.318C 192.5 260.533 192.5 260.697 192.5 260.806C 192.5 260.861 192.5 260.902 192.5 260.929C 192.5 260.943 192.5 260.954 192.5 260.96C 192.5 260.964 192.5 260.967 192.5 260.968C 192.5 260.97 192.5 260.971 193 260.971C 193.5 260.971 193.5 260.97 193.5 260.968C 193.5 260.967 193.5 260.964 193.5 260.96C 193.5 260.954 193.5 260.943 193.5 260.929C 193.5 260.902 193.5 260.861 193.5 260.806C 193.5 260.697 193.5 260.533 193.5 260.318C 193.5 259.887 193.5 259.248 193.5 258.413C 193.5 256.744 193.5 254.294 193.5 251.17C 193.5 244.922 193.5 235.981 193.5 225.204C 193.5 203.65 193.5 174.757 193.5 145.398C 193.5 86.6796 193.5 26.0971 193.5 18.6408L 192.5 18.6408ZM 193 260.971C 192.5 260.971 192.5 260.971 192.5 260.97C 192.5 260.97 192.5 260.97 192.5 260.97C 192.5 260.97 192.5 260.97 192.5 260.971C 192.5 260.972 192.5 260.973 192.5 260.975C 192.5 260.98 192.5 260.986 192.5 260.997C 192.499 261.018 192.498 261.048 192.497 261.091C 192.493 261.179 192.486 261.302 192.472 261.467C 192.442 261.805 192.385 262.275 192.267 262.863C 192.028 264.055 191.566 265.632 190.618 267.33C 188.743 270.698 184.975 274.49 177.338 276.015L 177.533 276.995C 185.461 275.413 189.475 271.438 191.491 267.816C 192.488 266.019 192.999 264.295 193.247 263.059C 193.372 262.434 193.436 261.909 193.468 261.555C 193.484 261.374 193.492 261.227 193.496 261.132C 193.498 261.082 193.499 261.042 193.499 261.017C 193.5 261.003 193.5 260.992 193.5 260.985C 193.5 260.981 193.5 260.978 193.5 260.976C 193.5 260.974 193.5 260.973 193.5 260.973C 193.5 260.972 193.5 260.972 193.5 260.972C 193.5 260.971 193.5 260.971 193 260.971ZM 177.316 276.019L -0.119042 319.514L 0.119042 320.486L 177.555 276.99L 177.316 276.019Z"/>
</defs>
</svg>

01.12.2017 / 19:13

Error translating structure code from C ++ to C # Get the id of the maximum value

score 1 · Accepted Answer

Now I've just re-modeled the template with CSS, what you have to take into consideration now is the Crossbrowser factor. Because transform:skewY() can be as problematic as SVG in your case, since both methods only work from ie9 forward!

Check compatibility with browsers on these links link link

Follow CSS template

.container{
    position: relative;
    width: 300px;
    height: 360px;
    overflow: hidden;
}
.big{
    width: 300px;
    height: 312px;
    border: 1px solid navy;
    border-radius: 1rem;
    position: absolute;
    top: 0;
    left: -15px;
    background-color: #fff;
}
.small{
    width: 270px;
    height: 82px;
    border-bottom: 1px solid navy;
    position: absolute;
    bottom: 22px;
    left: 0px;
    transform: skewY(-10deg);
    background-color: #fff;
}

<div class="container">
    <div class="big"></div>
    <div class="small"></div>
</div>

OBS: You may have to make fine adjustments to the height and bottom of the "small" class to be perfect. Right here in the code component of Stackoverflow's response was already different from my Chrome and I had to adjust.

Now it's up to you to explain to the client if it is better to opt for SVG or Turn the two are only compatible from ie9 forward.