css-shapes | 易学教程

Pixelated edge around a CSS Circle with overflow: hidden;

阅读更多关于 Pixelated edge around a CSS Circle with overflow: hidden;

问题 Here is the JSFIDDLE of my cat/animation without any drop-shadows to show the problem as clearly as I can. To my understanding this is being caused by the border-radius and possibly due to overflow: hidden; . The owl is not what this question is about , just an example of a similar situation I was in. The jsfiddle/cat is what this question is about, sorry for the mix up! Here is a JSFIDDLE for my cat with an inset box shadow using the blur property of a box-shadow and the pixelated edge is

Arrow Box with CSS

阅读更多关于 Arrow Box with CSS

问题 How can I make this box in CSS? I\'ve seen a few tutorials that teach how to create boxes with arrows, however, in my case, none of those tutorials are suitable. 回答1: I created your element with the surrounding 1px border. I'm using one <div> element and taking advantage of the :before and :after pseudo-elements (browser-support). The main rectangle has a regular 1px border, but the triangle elements are essentially 2 triangles, one darker than the other. The lighter triangle sits on top of

Center Triangle at Bottom of Div

阅读更多关于 Center Triangle at Bottom of Div

问题 I am trying to have a triangle/arrow at the bottom of my hero but it is not responsive and doesn\'t work on mobile very well as the triangle floats off to the right and is not absolutely centered anymore. How could I keep the triangle positioned in the absolute center at the bottom of the div at all times? Example code here: http://jsfiddle.net/SxKr5/1/ HTML: <div class=\"hero\"></div> CSS: .hero { position:relative; background-color:#e15915; height:320px !important; width:100% !important; }

Filling water animation

阅读更多关于 Filling water animation

问题 I am trying to get a wipe up animation to make a circle look like it\'s filling with water . I\'ve run into two errors, and haven\'t been able to even tackle the 3rd one: It fills up the wrong way It resets to empty (black) after it has filled * For now, I am using the <img> tags, but I would like to move this effect to body { background-image: } and need some direction on how to do this. What I have tried so far: #banner { width: 300px; height: 300px; position: relative; } #banner div {

html/css hexagon with image inside

阅读更多关于 html/css hexagon with image inside

Is there a chance to place an image inside a hexagon shape? I'm used to hexagonal shaped cells in html , but I could'nt get it filled with an (background?) image. Here is what I have tried : .top { height: 0; width: 0; display: block; border: 20px solid red; border-top-color: transparent; border-right-color: transparent; border-bottom-color: red; border-left-color: transparent; } .middle { height: 20px; background: red; width: 40px; display: block; } .bottom { height: 0; width: 0; display: block; border: 20px solid red; border-top-color: red; border-right-color: transparent; border-bottom

Creating an Isoceles Trapezoid shape

阅读更多关于 Creating an Isoceles Trapezoid shape

问题 I\'m wondering if I could produce something similar to this with CSS: And I\'m also wondering, is this the right place for such a question? I have not tried anything codewise, I\'ve done the brown images with photoshop. Thanks for any help ! 回答1: This shape (an Isoceles Trapezoid) can be easily made using CSS3 by rotating a div with a bit of perspective. Explanation The shape is achieved by rotating an absolutely positioned pseudo-element ( .container:after ) along the x-axis with a

Half hexagon shape with one element

阅读更多关于 Half hexagon shape with one element

问题 I\'m trying to replicate the following shape with no success: I\'m guessing I\'ll need some :before and :after pseudo elements along with the following css: #pentagon { position: relative; width: 78px; height:50px; background:#3a93d0; } 回答1: Using Border Method: You can do it using the below CSS. The shape is obtained by placing a triangle shape at the bottom of the rectangle using :after pseudo element. The triangular part is achieved using border method. .pentagon { height: 50px; width:

Div with cut out edges, border and transparent background

阅读更多关于 Div with cut out edges, border and transparent background

问题 I\'ve been trying to figure out how to make a custom shape in CSS that visually will look like this: With the property of background:rgba(44, 44, 48, 0.9) and border:6px solid rgba(29, 30, 35, 0.9); My problem is that I cannot find a way to make the top-right and bottom-left border look like the image I provided. Tried the tips on CSS Custom Shape on CSS-Tricks but it doesn\'t seem to solve the problem as it cannot have background. Any ideas? 回答1: Unfortunately you cannot have a pseudo

How can I create a wavy shape CSS?

阅读更多关于 How can I create a wavy shape CSS?

问题 Please see the image below for what I am trying to create: I have the following so far but it needs to be more \'\'frequent\'\' like increasing the frequency rate of a sin or cosine wave. #wave { position: relative; height: 70px; width: 600px; background: #e0efe3; } #wave:before { content: \"\"; display: block; position: absolute; border-radius: 100% 50%; width: 340px; height: 80px; background-color: white; right: -5px; top: 40px; } #wave:after { content: \"\"; display: block; position:

How to create a triangle in CSS3 using border-radius

阅读更多关于 How to create a triangle in CSS3 using border-radius

问题 I am using border-radius property to acheive rounded corners. But I am not sure how to get rounded corners of this shape. I tried giving same dimensions from either sides but they just dont give me the exact shape. Am I missing some CSS3 property here. Just wondering if clip css property is the answer. UPDATE: http://jsfiddle.net/YWnzc/136/ 回答1: Demo #player { margin: 32px; position: relative; width: 400px; height: 250px; background-color: #222; } #inner { transform: rotate(45deg); background