css-shapes | 易学教程

CSS Speech Bubble with Box Shadow

阅读更多关于 CSS Speech Bubble with Box Shadow

问题 Creating a DIV that uses CSS to draw a triangle to the left. Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code. Is this possible? Or am I better off using border-image for this? (Top: Before Shadow, Middle: CSS Box-Shadow, Bottom: Desired Result) .bubble{ height: 200px; width: 275px; opacity: 0; margin-top: 41px; float: right; background-color: #F2F2F2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 6px #B2B2B2; } .bubble::after { height

CSS Cut out circle from a rectangular shape

阅读更多关于 CSS Cut out circle from a rectangular shape

问题 I managed to achieve this effect: http://jsfiddle.net/6z3msdwf/1/ but I am not really happy with the markup. Also, there is an weird bug in IE 10/11 where a 1px gap is shown when you resize the window. Is there any other way to do this? Or maybe fix this one in IE. EDIT The circle must not use a border, it should be transparent. body, html { font-size: 18px; } body { background-color: #fff } .avatar { width: 90px; height: 90px; position: absolute; background-color: red; top: -115px; left: 5px

Slanted Corner on CSS box

阅读更多关于 Slanted Corner on CSS box

问题 I have been playing with CSS for only a short time and am trying to have a normal box but with the top left hand corner cut off at a 45 degree angle. Not a small amount either; I\'m looking at a quite large corner cut at that angle. This effect: How should I go about it? 回答1: Descriptions Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) supports old browsers. For CSS3-specific, try CSS polygons: http://alastairc.ac/2007/02/dissecting-css-polygons/. Code The HTML: <div class

CSS Transform Skew [duplicate]

阅读更多关于 CSS Transform Skew [duplicate]

问题 This question already has an answer here: Responsive CSS Trapezoid Shape 2 answers Does anyone know how to achieve skew like this: Using CSS\'s new transform property? As you can see I\'m trying to skew both corners, anyone know if this is possible? 回答1: CSS: #box { width: 200px; height: 200px; background: black; position: relative; -webkit-transition: all 300ms ease-in; } #box:hover { -webkit-transform: rotate(-180deg) scale(0.8); } #box:after, #box:before { display: block; content: "\0020";

How to create uneven rounded sides on a div?

阅读更多关于 How to create uneven rounded sides on a div?

问题 I\'ve been trying to make a DIV with uneven rounded sides like this: I\'ve checked some solutions and the closest I can get to it is by using border-radius. I\'ve used: border-bottom-left-radius: 80%50px; border-bottom-right-radius: 30%30px; And this is what I\'ve got: How can this be done? 回答1: You can consider clip-path .box { height: 200px; width: 200px; background: blue; -webkit-clip-path: circle(75% at 65% 10%); clip-path: circle(75% at 65% 10%); } <div class="box"> </div> Or use radial

How to add border in my clip-path: polygon(); CSS style

阅读更多关于 How to add border in my clip-path: polygon(); CSS style

问题 I want to know if it is a possible to add border in my clip-path:polygon(); style or any another way to add border? like : border:5px solid red; CSS .poligon { display: inline-block; position:relative; width:150px; height:150px; background: black; box-sizing:border-box; padding:55px; } .poligon img { display: inline-block; border:5px solid red; width:150px; height:150px; -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385%

How to Make A Fancy Arrow Using CSS?

阅读更多关于 How to Make A Fancy Arrow Using CSS?

问题 Ok, so everyone knows you can make a triangle using this: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this? 回答1: You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after , and rotate and position each of them to

How to draw a circle sector in CSS?

阅读更多关于 How to draw a circle sector in CSS?

问题 Well, drawing a circle with pure CSS is easy. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } How do I draw a sector? Given a degree X [0-360] I want to draw a X degrees sector. Can I do that with pure CSS? For example: Thanks + Example Thank you Jonathan, I used the first method. If it helps someone here\'s an example of a JQuery function that gets percentage and draw a sector. The sector is behind the percentage circle and

How can I create a “tooltip tail” using pure CSS?

阅读更多关于 How can I create a “tooltip tail” using pure CSS?

问题 I just came across a neat CSS trick. Check out the fiddle... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } <div>Cool Trick: <br /> <div class=\"tooltiptail\"></div> </div> <br /> <div>How do I get this effect with only CSS? <br /> <div class=

CSS Progress Circle [closed]

阅读更多关于 CSS Progress Circle [closed]

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%. I would like it to stop at certain percentages like in the screenshot below. Is there any way I can do that using only CSS? andsens I created a tutorial on how to do exactly that with CSS3 and the LESS JavaScript library. You can find the blogpost here: https://medium.com/secoya-tech/a917b80c43f9 Here is a jsFiddle of the final result. The percentage is set via the data-progress attribute. Changes are animated using CSS transitions. Panos Kal. I created a