css-shapes

I'm working on a css animation that uses 'cogs and chains', but am unable to create a 'smooth' border rotation sequence. You can see in this fiddle How (currently) I'm using a pseudo element to generate a 'rotation' effect. This is done by 'switching' between a dashed white and dashed gold colored border, making it seem like the 'border is rotating'. What I have #one{ -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */ -o-animation: rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */

I have this code snippet: .multiply-button { display: table; background: rgba(0, 0, 0, 0); border: none; color: white; padding: 0; } .multiply-button-content { display: table-cell; background: green; padding: 10px 9px; border: solid 1px black; border-right: none !important; } .multiply-button-arrow { display: table-cell; width: 0px; height: 0px; border-style: solid; border-width: 20px 0 20px 12px; border-color: transparent transparent transparent green; } <button id="multiply-button" class="multiply-button"> <div class="multiply-button-content">Multiply</div> <div class="multiply-button-arrow"

I have the following code: ( Fiddle ) body { background-color: red; } #grad1 { height: 100px; width: 100%; background: linear-gradient(521deg, rgba(138, 138, 138, 0) 50%, rgba(138, 138, 138, 0) 31.9%, #fff 0.1%, #fff 0%); } <div id="grad1"></div> I basically want the width to be responsive and the gradient's shape to be maintained even though the width changes. What I've tried: Set the width to 100% this doesn't work because its an empty div That's about it, I have no other ideas to be honest. I'd appreciate if someone could help. This is what I'm using it for: (the images are just an example

I want to create the same linear gradient for each border. The border gradient with 5 colors starts from transparent to white to black to white to transparent That way I have transparent corners. How can I do this for all 4 borders? Is it possible to assign a linear-gradient to a border? Sidenote: It should run without too much effort on IE9+ else IE10+ :P How about using a radial gradient? Although this is just a mock up, you can see the basic effect. .outer { vertical-align:top; display:inline-block; height: 100px; width: 100px; position: relative; background: -moz-radial-gradient(center,

I have this: I want to achieve this: I have a big outer div (with red background) and a smaller-inner div (with green background). The small div has a border, I want the border to appear as transparent to show the behind background. Is this achievable with HTML/CSS? You can achieve the transparent border showing background image using a pseudo element. The red background is the border of the pseudo element and the transparent border is created by the gap between the element's background and the pseudo element's border: DEMO : body{ background:url('https://farm4.staticflickr.com/3771

This question already has an answer here: How to bevel the corner of a block div? 4 answers I am trying to create a Parallelogram with a straight right side in css but so far I am struggling to achieve this. I am using css ... -webkit-transform: skew(-18deg); -moz-transform: skew(-18deg); -o-transform: skew(-18deg); ...to 'skew' the rectangle to create the Parallelogram. I am wondering if the right side can be made straight? Would it require :before and :after in the css? Any help of this would be great. Thanks, Phil You can achieve this by adding a triangle shaped element and positioning it

I'm trying to replicate a graphical design using css, but I have failed for responsive, I can achieve an static form but with tiny defects (due to putting together two elements). This is the graphical design: I prefer it a bit more tilted, like: skew(-40deg) . But the idea is to have an inner rounded border that wraps that key-button just like in the image. The html is simple: <header> <nav></nav> </header> The css: body > header > nav { display: flex; align-items: flex-end; justify-content: center; width: 100vw; height: 90px; padding: 10px 0; text-align: center; z-index: 1 } body > header >

I'm trying to make a curved speech bubble out of a div, like this: This is what I've tried, but it doesn't really work: .userMsgBottom{ position: relative; display: inline-block; max-width: 260px; height: auto; word-wrap: break-word; background-color: #2e7384; margin-top: 12px; margin-left: 8px; margin-right: 8px; padding: 7px; border-radius: 6px; } .userMsgBottom:after { content: ""; position: absolute; bottom: 0px; right: 5px; width: 70px; height: 30px; background-color: #2e7384; transform: skew(45deg); transform-origin: top right; border-radius: 0 15% 5% 0% / 25%; z-index: -1; } it does

Content needs to be able to scroll behind it in the concave area and not be obscured. Specifically, I'm trying to create this: For a transparent background, you can use box-shadows : DEMO Explanation : The point of this technique is to use a pseudo element with box-shadows and a transparent backcground to see through it. The pseudo element is abolutely positioned and has a much larger width than the container in order to (with the help of border radius) give a smooth inset curve to the bottom of the div. To make it simple : The background of the div is the box-shadow of the pseudo element. The