css-shapes | 易学教程

How to draw circle in html page?

阅读更多关于 How to draw circle in html page?

问题 How do you draw a circle using HTML5 and CSS3? Is it also possible to put text inside? 回答1: You can't draw a circle per se. But you can make something identical to a circle. You'd have to create a rectangle with rounded corners (via border-radius ) that are one-half the width/height of the circle you want to make. #circle { width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: red; } <div id="circle"></div> 回答2: It is quite possible

Easier way to create circle div than using an image?

阅读更多关于 Easier way to create circle div than using an image?

问题 I\'m wondering if there\'s an easier way to create circular divs than what I\'m doing now. Currently, I am just making an image for each different size, but it\'s annoying to do this. Is there anyway using CSS to make divs which are circular and I can specify the radius? 回答1: Here's a demo: http://jsfiddle.net/thirtydot/JJytE/1170/ CSS: .circleBase { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ } .type1 { width: 100px; height: 100px; background: yellow;

Responsive CSS triangle with percents width

阅读更多关于 Responsive CSS triangle with percents width

问题 The code below will create an arrow right below an <a> element: JSFiddle .btn { position: relative; display: inline-block; width: 100px; height: 50px; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; } .btn:after { content: \"\"; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-width: 10px 50px 0 50px; border-style: solid; border-color: gray transparent transparent transparent; } <a href=\"#\" class=\"btn\">Hello!</a> The

Triangle shape with background image

阅读更多关于 Triangle shape with background image

问题 I am working on a project that calls for two triangles to hold background images, and be links. Here is my mock up for how I would like the two triangles. Currently, I have just two divs that span the 900x600 with each triangle as a background image. The issue I am having now is I can\'t hover over the transparent part of the Cinema div to reach the photo div. Can I accomplish this design with css3 triangles and set their background images? I always thought the custom shape is made up from a

Generate repeating hexagonal pattern with CSS3

阅读更多关于 Generate repeating hexagonal pattern with CSS3

问题 So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I\'d prefer to just use CSS if possible. Here\'s an idea of what I\'m trying to create: Basically, I just need a way to create the hexagonal shapes, and then overlay text/images on top of them. I don\'t have much code yet, because I\'m not really sure where to start. The problem is, I could just use <div> s in the shape of a hexagon like shown in (http://css-tricks.com/examples/ShapesOfCSS/)

CSS3 Transform Skew One Side

阅读更多关于 CSS3 Transform Skew One Side

问题 Is it possible to create \"CSS3 Transform Skew One Side\" I found one solution, but it\'s not useful to me, because I need to use a image for background (not color) #skewOneSide { border-bottom: 40px solid #FF0000; border-left: 50px solid rgba(0, 0, 0, 0); height: 0; line-height: 40px; width: 100px; } Even this JsFiddle is not useful as well (skewed area should be transparent) 回答1: Try this: To unskew the image use a nested div for the image and give it the opposite skew value. So if you had

How to use CSS to surround a number with a circle?

阅读更多关于 How to use CSS to surround a number with a circle?

问题 I would like to surround a number in a circle like in this image: Is this possible and how is it achieved? 回答1: Here's a demo on JSFiddle and a snippet: .numberCircle { border-radius: 50%; width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } <div class="numberCircle">30</div> My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about

Control the dashed border stroke length and distance between strokes

阅读更多关于 Control the dashed border stroke length and distance between strokes

Is it possible to control the length and distance between dashed border strokes in CSS? This example below displays differently between browsers: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> Big differences: IE 11 / Firefox / Chrome Are there any methods that can provide greater control of the dashed borders appearance? Css render is browser specific and I don't know any fine tuning on it, you should work with images as recommended by Ham. Reference: http://www.w3.org/TR/CSS2/box.html#border-style-properties The native dashed border

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:

How to create multi-color border with CSS?

阅读更多关于 How to create multi-color border with CSS?

问题 How to create multi-color border like image below? 回答1: You can do it with :after or :before psuedo element and css linear-gradient as shown below: body { background: #ccc; } .box { text-align: center; position: relative; line-height: 100px; background: #fff; height: 100px; width: 300px; } .box:after { background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); position: absolute; content: ''; height: 4px; right: 0; left: 0; top: 0; }