How can I make the bottom of my div have a peak shape?

up vote
1
down vote

favorite

I am trying to make my div have this form:

enter image description here

I only get this result with the code I am using:

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);

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

}

<div></div>

Thanks for you help guys!

edited Nov 11 at 4:05

Smollet777

544314

asked Nov 10 at 16:54

jlgf

397

add a comment |

up vote
1
down vote

favorite

I am trying to make my div have this form:

enter image description here

I only get this result with the code I am using:

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);

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

}

<div></div>

Thanks for you help guys!

edited Nov 11 at 4:05

Smollet777

544314

asked Nov 10 at 16:54

jlgf

397

add a comment |

up vote
1
down vote

favorite

I am trying to make my div have this form:

enter image description here

I only get this result with the code I am using:

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);

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

}

<div></div>

Thanks for you help guys!

edited Nov 11 at 4:05

Smollet777

544314

asked Nov 10 at 16:54

jlgf

397

I am trying to make my div have this form:

enter image description here

I only get this result with the code I am using:

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);

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

}

<div></div>

Thanks for you help guys!

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);

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

}

<div></div>

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);

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

}

<div></div>

html css html5 css3

edited Nov 11 at 4:05

Smollet777

544314

asked Nov 10 at 16:54

jlgf

397

edited Nov 11 at 4:05

Smollet777

544314

asked Nov 10 at 16:54

jlgf

397

edited Nov 11 at 4:05

Smollet777

544314

edited Nov 11 at 4:05

Smollet777

544314

edited Nov 11 at 4:05

Smollet777

544314

asked Nov 10 at 16:54

jlgf

397

asked Nov 10 at 16:54

jlgf

397

asked Nov 10 at 16:54

jlgf

397

add a comment |

2 Answers
2

active

oldest

votes

up vote
2
down vote

accepted

If it's only about coloration you don't need to use clip-path. You can easily achieve this with multiple background and have a better support:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,

    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

In case you need the black border you can adjust like below:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,

    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

edited Nov 10 at 18:37

answered Nov 10 at 18:25

Temani Afif

59.5k93472

add a comment |

up vote
2
down vote

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

}

<div></div>

This link is helpful https://bennettfeely.com/clippy/

answered Nov 10 at 17:07

Smollet777

544314

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241221%2fhow-can-i-make-the-bottom-of-my-div-have-a-peak-shape%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
2
down vote

accepted

If it's only about coloration you don't need to use clip-path. You can easily achieve this with multiple background and have a better support:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,

    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

In case you need the black border you can adjust like below:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,

    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

edited Nov 10 at 18:37

answered Nov 10 at 18:25

Temani Afif

59.5k93472

add a comment |

up vote
2
down vote

accepted

If it's only about coloration you don't need to use clip-path. You can easily achieve this with multiple background and have a better support:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,

    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

In case you need the black border you can adjust like below:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,

    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

edited Nov 10 at 18:37

answered Nov 10 at 18:25

Temani Afif

59.5k93472

add a comment |

up vote
2
down vote

accepted

If it's only about coloration you don't need to use clip-path. You can easily achieve this with multiple background and have a better support:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,

    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

In case you need the black border you can adjust like below:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,

    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

edited Nov 10 at 18:37

answered Nov 10 at 18:25

Temani Afif

59.5k93472

If it's only about coloration you don't need to use clip-path. You can easily achieve this with multiple background and have a better support:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,

    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

In case you need the black border you can adjust like below:

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,

    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,

    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,

    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,

    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

div.box {

  height: 300px;

  background:

    linear-gradient(blue,blue) top/100% 70%,

    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,

    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;

  background-repeat:no-repeat;

  margin-bottom:20px;

}

<div class="box">

</div>

edited Nov 10 at 18:37

answered Nov 10 at 18:25

Temani Afif

59.5k93472

edited Nov 10 at 18:37

answered Nov 10 at 18:25

Temani Afif

59.5k93472

answered Nov 10 at 18:25

Temani Afif

59.5k93472

answered Nov 10 at 18:25

Temani Afif

59.5k93472

add a comment |

up vote
2
down vote

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

}

<div></div>

This link is helpful https://bennettfeely.com/clippy/

answered Nov 10 at 17:07

Smollet777

544314

add a comment |

up vote
2
down vote

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

}

<div></div>

This link is helpful https://bennettfeely.com/clippy/

answered Nov 10 at 17:07

Smollet777

544314

add a comment |

up vote
2
down vote

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

}

<div></div>

This link is helpful https://bennettfeely.com/clippy/

answered Nov 10 at 17:07

Smollet777

544314

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

}

<div></div>

This link is helpful https://bennettfeely.com/clippy/

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

}

<div></div>

div {

  background: lightblue;

  height: 34rem;

  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);

}

<div></div>

answered Nov 10 at 17:07

Smollet777

544314

answered Nov 10 at 17:07

Smollet777

544314

answered Nov 10 at 17:07

Smollet777

544314

answered Nov 10 at 17:07

Smollet777

544314

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu