css-shapes

CSS - how do I make a 1/4 circle that is 100vh?

由 假如想象 提交于 2021-02-10 07:07:50
问题 I want something like this (the pink circle): CSS quarter circle 100vh example. So far, I have a half-circle (see CSS below), but when I try to make it 100vh, it stretches and I can't figure out how to keep it proportional. .circle { height: 180px; width: 90px; border-radius: 0 90px 90px 0; -moz-border-radius: 0 90px 90px 0; -webkit-border-radius: 0 90px 90px 0; background: red; margin: 100px; position: absolute;} Any insights greatly appreciated. Thanks 回答1: I modified the code to only use

Trying to create this css ribbon. Struggling with the curve of the ribbon

由 只谈情不闲聊 提交于 2021-02-10 04:30:42
问题 I've tried to create this css shape (ribbon) using border radius but I'm unable to do so, the curve I'm able to get isn't exactly matching the div's curve in the image. background: #008712; width: 89px; height: 22px; box-shadow: #d0dae0; background-color: #008712; border-bottom-left-radius: 70px; } If I get this curve right that solves the problem, I would like avoid svgs if possible. 回答1: Use pseudo element with some skew transformation: .box { width:200px; padding:8px; font-size:25px; color

Trying to create this css ribbon. Struggling with the curve of the ribbon

由 為{幸葍}努か 提交于 2021-02-10 04:29:29
问题 I've tried to create this css shape (ribbon) using border radius but I'm unable to do so, the curve I'm able to get isn't exactly matching the div's curve in the image. background: #008712; width: 89px; height: 22px; box-shadow: #d0dae0; background-color: #008712; border-bottom-left-radius: 70px; } If I get this curve right that solves the problem, I would like avoid svgs if possible. 回答1: Use pseudo element with some skew transformation: .box { width:200px; padding:8px; font-size:25px; color

How to make a vertical oval type of shape div?

由 假装没事ソ 提交于 2021-02-09 01:56:36
问题 I want to create an oval shape like the one below but failing Also is there any way to insert an image inside this oval shaped css? that's my main objective. My Demo #oval { margin: 0px 0 10 02px; background: black; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 70px; border-radius: 50px / 50px; border-top-left-radius: 150px; border-top-right-radius: 150px; border-bottom-left-radius: 150px; border-bottom-right-radius: 150px; width: 80px; height: 100px; } <!DOCTYPE html>

How to slant dashed border in CSS?

由 独自空忆成欢 提交于 2021-02-08 23:37:18
问题 I am trying to design an envelope using CSS for a Mail App. My client wants dashed borders in this manner How can I achieve that effect with CSS borders? 回答1: You may have to play with the colors a little. .enveloppe { padding: 1em; border: 16px solid transparent; border-image: 16 repeating-linear-gradient(45deg, red 0, red 1em, transparent 0, transparent 2em, #b67 0, #b67 3em, transparent 0, transparent 4em); max-width: 20em; } <div class="enveloppe">Lorem Ipsum</div> 回答2: If you want to

How to slant dashed border in CSS?

由 大城市里の小女人 提交于 2021-02-08 23:37:07
问题 I am trying to design an envelope using CSS for a Mail App. My client wants dashed borders in this manner How can I achieve that effect with CSS borders? 回答1: You may have to play with the colors a little. .enveloppe { padding: 1em; border: 16px solid transparent; border-image: 16 repeating-linear-gradient(45deg, red 0, red 1em, transparent 0, transparent 2em, #b67 0, #b67 3em, transparent 0, transparent 4em); max-width: 20em; } <div class="enveloppe">Lorem Ipsum</div> 回答2: If you want to

dropdown menu with arrow in center

由 风流意气都作罢 提交于 2021-02-08 06:07:59
问题 I'm trying to create a dropdown menu like the one here, but I haven't been successful in styling it correctly. The menu I'm looking to create is similar to one found here Example: This is what I have so far! http://jsfiddle.net/9ggfz0st/1/ @import url('http://getbootstrap.com/dist/css/bootstrap.css'); .dropdown-menu:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent;

dropdown menu with arrow in center

由 房东的猫 提交于 2021-02-08 06:06:09
问题 I'm trying to create a dropdown menu like the one here, but I haven't been successful in styling it correctly. The menu I'm looking to create is similar to one found here Example: This is what I have so far! http://jsfiddle.net/9ggfz0st/1/ @import url('http://getbootstrap.com/dist/css/bootstrap.css'); .dropdown-menu:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent;

dropdown menu with arrow in center

由 让人想犯罪 __ 提交于 2021-02-08 06:03:43
问题 I'm trying to create a dropdown menu like the one here, but I haven't been successful in styling it correctly. The menu I'm looking to create is similar to one found here Example: This is what I have so far! http://jsfiddle.net/9ggfz0st/1/ @import url('http://getbootstrap.com/dist/css/bootstrap.css'); .dropdown-menu:before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-left: 7px solid transparent;

Curved line at the bottom of border in CSS

由 喜欢而已 提交于 2021-02-08 05:14:23
问题 I need this image in CSS and inside this border a background image needed. I have tried border-radius:0 0 50% 50%; -webkit-border-radius:0 0 50% 50%; But not getting the required shape. Any help would be appreciated. 回答1: With Border Radius: You can give the element a different border-radius value in the X and Y axis to obtain a curved bottom side with border and a background image. .curved-border { height: 200px; width: 400px; background: url(http://lorempixel.com/400/200/nature/1); border:
订阅 css-shapes