css-shapes | 易学教程

Elongated hexagon shaped button using only one element

阅读更多关于 Elongated hexagon shaped button using only one element

I would like to make a button like these one just with CSS without using another element. Button Image Since the button has a border attached, I think I normally need both, the :before and :after elements to create just one arrow at one side. So to make one arrow at each side I would need another span element inside the link. The second method I tried is the one you see below. But with this solution they are not properly centered and each side of the arrow is different in length. Has someone a solution? /* General Button Style */ .button { display: block; position: relative; background: #fff;

Responsive CSS Trapezoid Shape

阅读更多关于 Responsive CSS Trapezoid Shape

问题 I\'m looking to create a responsive trapezoid shape which can be in either CSS, SVG or Canvas. I have been able to create the triangle shape but not a trapezoid shape that is responsive. div { width: 0; height: 0; border-top: 5vw solid transparent; border-left: 10vw solid red; border-bottom: 5vw solid transparent; } <div></div> I have seen there are many questions on SO already that encompass a trapezoid shape but very little have reasons why they are better than other methods and also a

Responsive CSS Circles

阅读更多关于 Responsive CSS Circles

问题 Goal: Responsive CSS circles that: Scale with equal radius. Radius can be calculated by percent. Radius can be controlled by media queries. If solution is javascript , I still need to emulate media query triggers. I dont \'need\' media queries but I do want the ability to control the radius by percentage at certain widths: @media (max-width : 320px) { .x2{padding: 50%;} } @media (min-width : 321px) and (max-width : 800px) { .x2{padding: 25%;} } @media (min-width: 801px) { .x2{padding: 12.5%;}

Inset border-radius with CSS3

阅读更多关于 Inset border-radius with CSS3

Is there way to create inset border radius with css3? (Without images) I need a border radius like this: The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients , per Lea Verou. From her solution: div.round { background: -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px); background: -o-radial-gradient(0 100%,

HTML5 / CSS3 Circle with Partial Border

阅读更多关于 HTML5 / CSS3 Circle with Partial Border

问题 Is it possible to create a circle using only HTML5 / CSS3 which has a border that only goes part way around the circle? If not, what techniques can I use to accomplish this effect? I would prefer to use pure DOM elements, but if I have to I can draw on canvas or spin up an SVG. 回答1: Yes, it is possible - see this: demo .circle { position: relative; margin: 7em auto; width: 16em; height: 16em; border-radius: 50%; background: lightblue; } .arc { overflow: hidden; position: absolute; /* make

Border-radius in percentage (%) and pixels (px) or em

阅读更多关于 Border-radius in percentage (%) and pixels (px) or em

If I use a pixel or em value for border-radius, the edge radius is always a circular arc or a pill shape even if the value is greater than the largest side of the element. When I use percentages , the edge radius is elliptic and starts at the middle of each side of the element resulting in an oval or ellipse shape : Pixel value for border-radius : div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> Percent value for border-radius : div { background: teal;

Border within border CSS

阅读更多关于 Border within border CSS

问题 With the help of CSS Triangle tutorial, I learnt to create triangle shapes. .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #ccc; } I\'m trying to add a border to the triangle but I was unable to do it. what I achieved: Expected: (trying something similar border with gray) Check this JSFiddle Stuck up no where to start this. I tried outline , but none worked(I know it won\'t work). Thanks for taking time to

Border with a transparent centred arrow

阅读更多关于 Border with a transparent centred arrow

问题 I am trying to style a div with a bottom-border that has a downward-pointing arrow . The div will have an image in it, and should not have a top, right or left border. The fill of the downward-pointing arrow should be either the same as the div or transparent. I have been able to get it to work for the most part using the code below: .hero { position: relative; background-color: yellow; height: 320px !important; width: 100% !important; border-bottom: 1px solid red; } .hero:after { content: \'

Slanted diagonal line in html or css?

阅读更多关于 Slanted diagonal line in html or css?

问题 I want to make a Table like this is it possible to add a slanted diagonal border in table? 回答1: Based on CSS3 linear-gradients solution except that the angle is not hard coded: table:nth-of-type(1) td { background-image: linear-gradient( to top right, white 48%, black, white 52% ); } table:nth-of-type(2) td { background-image: linear-gradient( to top right, papayawhip calc(50% - 1px), black, papayawhip calc(50% + 1px) ); } /* for testing */ table { border-collapse: collapse; margin-top: 1em;

Creating a 'New' spiky label with 24 or above point burst

阅读更多关于 Creating a 'New' spiky label with 24 or above point burst

问题 I am trying to make a point burst thing like the image below: Currently, I have tried this using pseudo elements, however, I was only able to generate a 12 point burst and does not reflect that which is displayed within the image. Is there anyway to create a point burst with only a few elements? Below is the code I have used to attempt this solution: div{ width:100px; height:100px; background:grey; transform:rotate(45deg); margin:50px; } div:after{ position:absolute; content:\"\"; background