css-shapes | 易学教程

Is it possible to create an angled corner in CSS?

阅读更多关于 Is it possible to create an angled corner in CSS?

问题 I am wondering if there is any way to create this shape with pure CSS. To extend this problem further, this shape needs to clip the image inside (think of it as a mask - but the grey border has to be visible). Or am I better off creating this in canvas/svg? 回答1: It's a little difficult keeping the border, but I managed to achieve a close effect using :before and :after elements with a parent container (:before and :after don't work on an img tag) Add a border to the container Add a before to

Align text on slanted line

阅读更多关于 Align text on slanted line

问题 Is it posible to make text left aligned on a slanted line ? it\'s alignement should follow the slanted slanted image with required support for IE9+? My example code : img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } <div> <img src=\"http://placehold.it/150x250&text=img\" alt=\"image\" /> <p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.

Is a concave border radius possible?

阅读更多关于 Is a concave border radius possible?

问题 Here is a simple convex example. http://jsfiddle.net/swY5k/ #test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; } However, I want a concave border radius. I tried making the border-radius negative but this did not work. Example of concave/convex: 回答1: You can give the impression of a concave border using radial gradients on the background. For example, something like this: #test { width: 200px; height: 200px; background: #888888; background: radial-gradient(circle

Create a slanted edge to a div

阅读更多关于 Create a slanted edge to a div

问题 Im trying to create a slanted div, and everywhere I have looked I have just found how to do it using a border of some sorts, which will not work because the div will be places over the top of an image. So the code at the moment is as follows using Bootstrap: <div class=\"thumbnail\"> <a href=\"#\"> <img class=\"img-responsive\" src=\"banner.jpg\"> <h3 class=\"headline-badge\">slanted div text</h3> </a> </div> And this is the relevant CSS: .thumbnail img.img-responsive { width: 100%; border

draw diagonal lines in div background with CSS

阅读更多关于 draw diagonal lines in div background with CSS

问题 I have a div for a preview box: HTML: <div class=\"preview-content\">PREVIEW</div> CSS: .preview-content { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat; width: 100%; min-height: 300px; max-height: 300px; line-height: 300px; text-align: center; vertical-align: middle; font-size: 2em; } Question: how to add diagonal lines to div background like in the picture? note: with CSS only if

Circular percent progress bar

阅读更多关于 Circular percent progress bar

问题 I would like to have an percent circle indicator on my site: In this case it\'s showing 75%. How should this be done? I have the yellow circle in a image-file, but if it\'s easier to, some how, do it all using CSS, that\'s okay with me. 回答1: Considering the shape of the progress bar (rounded end/start) I would suggest using SVG. DEMO: Radial progress bar In the following example, the progress is animated with the stroke-dasarray attribute and the % numbers are incremented with jQuery: var

Curve bottom side of the div to the inside with CSS

阅读更多关于 Curve bottom side of the div to the inside with CSS

I would like to curve the bottom side of this rectangle div/background with CSS, so the result is something like this: Does someone have an idea perhaps how it could be achieved? .curved { margin: 0 auto; width: 800px; height: 500px; background: lightblue; } <div class="container"> <div class="curved"></div> </div> Simply use border radius and make the element to overflow . You can also rely on pseudo-element to avoid extra markup: .container { margin: 0 auto; width: 500px; height: 200px; background: lightblue; position: relative; overflow: hidden; } .container:after { content: ""; position:

css: how to draw circle with text in middle?

阅读更多关于 css: how to draw circle with text in middle?

问题 I found this example on stackoverflow: Draw Circle using css alone Which is great. But I\'d like to know how to modify that example so that I can include text in the middle of the circle? I also found this: Vertically and horizontally centering text in circle in CSS (like iphone notification badge) but for some reason, its not working for me. When I create the following test code: <div class=\"badge\">1</div> instead of a circle, I get a oval shape. I\'m trying to play around with the code to

How to bevel the corner of a block div?

阅读更多关于 How to bevel the corner of a block div?

问题 I have the following HTML document: <!DOCTYPE HTML> <html> <head> <meta charset=\"utf-8\"> <title>Тег DIV</title> <style type=\"text/css\"> .block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; } </style> </head> <body> <div class=\"block1\">Text Content</div> </body> </html> How do I describe the style to get the following? 回答1: Until CSS4 border-corner-shape property is in danger! and it's not implemented, This can be done by

Invert rounded corner in CSS?

阅读更多关于 Invert rounded corner in CSS?

I have a css code: -moz-border-radius-topleft:50px; I get the result: Is there any possibilities to give like this: Chris Burton Just to update this, it seems you can in multiple ways. Lea Verou posted a solution Here is mine using border-image Using border image html <div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div> css div { width: 200px; border-width: 55px; -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat; -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat; -o-border-image: url(http://i47