css-shapes

Did CSS break my heart?

由 寵の児 提交于 2019-12-13 13:26:39
问题 Following this question, I created a JSFiddle, but the output doesn't seem so good: Here is the CSS, taken from the answer there: #heart { position: relative; width: 100px; height: 90px; margin-top: 10px; /* leave some space above */ } #heart:before { position: absolute; content: ""; left: 50px; top: 0; width: 52px; height: 80px; background: red; /* assign a nice red color */ border-radius: 50px 50px 0 0; /* make the top edge round */ } #heart:before { -webkit-transform: rotate(-45deg); /* 45

Rectangle with curved sides [closed]

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-13 11:23:27
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 4 years ago . How can I achieve this by simple DIV with css? HTML: <div class="curv"> <div class="holder"></div> </div> CSS: .curv{ width: 800px; margin: 0 auto; position: relative; padding-top: 100px; overflow: hidden; } .curv:before{ background: #333; width: 100%; height: 200px; left: 0px;

shape-outside property not working at all

由 假如想象 提交于 2019-12-13 08:41:49
问题 I have just started trying out the shape-outside property in css but I am not able to make it work,no matter how many documentation or blogs I go through. I may have done a silly mistake but I am not not sure about it. Can someone point out the mistake? #q { background-color: #E6C9C9; /*height: 100%; width: 100%;*/ float: left !important; -webkit-shape-outside: circle(50%); shape-outside: circle(50%); } <html> <head> <title>Testing Split Div</title> <link rel="stylesheet" href="https://maxcdn

Filling up a circle progress bar [closed]

由 你离开我真会死。 提交于 2019-12-13 08:25:51
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 3 months ago . I've search this website with multiple progressive circle sample but did not find similar to my requirement. I'm trying to create progress circle filled from bottom to top. The % percent value will pass from textbox. 回答1: You could handle the animation with transforms and

How to create a circle with links on border side

由 我的未来我决定 提交于 2019-12-13 02:55:11
问题 I am trying to make a circle like this. I was able to make it in the fiddle, but the problem is that I need each orange side to be a link and I can't do it with borders. If anyone can help me with this I will be really grateful. #circle { width: 200px; height: 200px; border-radius: 50%; background: green; } #incircle { width: 100px; height: 100px; border-radius: 50%; border: 50px dotted orange; } <div id="circle"> <div id="incircle"></div> </div> 回答1: The key to creating a circle with

Divide two divs by another curved/arched div

由 我怕爱的太早我们不能终老 提交于 2019-12-13 01:40:53
问题 I want to create a website layout containing several full width pictures, which are aligned vertically. The pictures shall be seperated by a curved element, which ideally is created with HTML/CSS, as the width could change and the curve shall always fill the 100% width. I have uploaded a visualization of my problem here: I have tried some stuff with the border-radius , like this: http://jsfiddle.net/37u4c/34/ but the results are not quite what I want. The height of the element shall remain

css arrow with bottom border [duplicate]

由 ℡╲_俬逩灬. 提交于 2019-12-12 22:04:40
问题 This question already has answers here : Transparent arrow/triangle indented (3 answers) Closed 4 years ago . I need to create an arrow inside a div. I have created the arrow but need to get the visul effect with border as shown as below Demo of the tried sample http://jsfiddle.net/rLZkf/4/ div { margin: 20px; height: 200px; width: 200px; background-color: #c1c1c1; border: #000 solid 2px; background-image: -webkit-linear-gradient(135deg, transparent 75%, #fff 75%), -webkit-linear-gradient

Create quadrilateral with specific degree

由 China☆狼群 提交于 2019-12-12 16:26:42
问题 How can I create a quadrilateral with css, when I know which degree each corner has. I already tried to recreate a quadrilateral I have with transform and skew. However, this does not work really well. This is what I try to archive. The exact requirements are: A div with this as background in one color. On the image are just construction lines. It should be a solid quadrilateral with these angles. This was my first idea: transform: rotate(-45deg) skew(27.5deg, 62.5deg) transform-origin: top

css make responsive oval block

由 我们两清 提交于 2019-12-12 16:25:53
问题 I am trying to make a css blocks for numbers shown in image below. My idea / goal is to make one responsive block so if there will be one number it will be round, if two then like second. I have been tried to make border-radius: 50% so the first block I succeed to do second was not like in image with border-radius: 50% So my question is it possible to make such result with one class block or for each button (left | right) I need to write special class for each block ? 回答1: Fixed Height

CSS? How is this arrow made?

由 本小妞迷上赌 提交于 2019-12-12 14:53:34
问题 This is driving me insane. I've been using the Firefox inspector to try to figure out how this arrow was made (below) on the Headway site. I've whittled away the code by deleting chunks via the inspector, and got it down to this: No matter where I inspect, I can not find any such shape. No background image, no glyphs, nothing. It hardly even matters at this point, but I'm pulling my hair out trying to figure out how they did this! Any CSS gurus care to take a look and chime in? For the sake
订阅 css-shapes