css-shapes

问题 I have created div element on run type using Javascript to draw a different type of shape. I am using jquery and CSS to draw shape and using like this in my project. the below code for Diamond. $(symbol).css({ "width": options.ShapeSize.width/2, "height": options.ShapeSize.height/2, "left": (evt.startX), "top": (evt.startY), "border-style": "solid", "background-color": options.Style.Color, "border-color": options.Style.BorderColor, "margin": "3px 0 0 30px", "transform": "rotate(-45deg)",

问题 I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive. div { width:200px; height:80px; background: red; top:150px;left:100px; position: relative; } div:before { content: ''; position: absolute; top: 40px; right: 0; border-right: 200px

问题 My question is similar to this question: Arrow Box with CSS But instead of only 1 box I need to align several boxes. And still be able to see the arrow on all boxes. In this example: http://jsfiddle.net/casperskovgaard/LHHzt/1/ I have created two arrow boxes that float to the left. The problem is that the arrow on the first box is not visible. How do I make the arrow visible? HTML: <div class="arrow"></div> <div class="arrow"></div> CSS: .arrow { float: left; width: 128px; height: 100px;

问题 How can I make the border radius towards inside? .circle { width:100px; height:100px; background-color:solid red; border-radius:-50px 50px -50px [enter image description here][1]50px; } I know -50px is not acceptable but I just give a theoretical example. Please see the below image for reference. 回答1: SVG You should not use css to create complex shapes. Use SVG instead. Shape created with a SVG Path In addition to 3 curves in the path Highlighted each curve so you can see how to create the

问题 How can I make the border radius towards inside? .circle { width:100px; height:100px; background-color:solid red; border-radius:-50px 50px -50px [enter image description here][1]50px; } I know -50px is not acceptable but I just give a theoretical example. Please see the below image for reference. 回答1: SVG You should not use css to create complex shapes. Use SVG instead. Shape created with a SVG Path In addition to 3 curves in the path Highlighted each curve so you can see how to create the

问题 In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture). This is my code, .sk-folding-cube { margin: 20px auto; width: 40px; height: 40px; position: relative; } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1);

问题 How would I create a DIV containing an IMG where the DIV cuts the image into a triangle, thereby displaying only part of the image though a triangle. so.. <div> <img src='some_image' /> </div> Where the image is a square, but the DIV containing the image is a triangle. http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/ solves this very well except this solution is not x-browser friendly (non-ie). http://css3pie.com/ looks interesting, however this relies on PHP. 回答1:

问题 I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution). Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red? I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image. The solution needs to be compatible with IE7+ and using browser's versions (more than 2%). Thanks 回答1: To expand on web-tiki's answer, I think this

问题 I would like to create complex arrow-like shape with CSS like this image: This is the current code: .camera_caption { position: relative; background-color: greenyellow; left: 0; margin-top: 263px; width: 717px; /*height: 234px;*/ padding-left: 365px; font: normal 14px/24px 'Roboto'; color: #fff; } .camera_caption:after { content: ""; background: url(../images/capture_bg2.png) 0 0 no-repeat; position: absolute; height: 234px; width: 119px; right: -119px; top: 0; } The code is working but I

问题 I would like to build a animated spinner with CSS3. It should behave like this : After the last state it should start again like in the first state. I managed to create circles using the technique explained here : stackoverflow question Now, how can I animate the spinner between the described states? I do not know how to animate the clip-rect property. I also guess that it would behave better with a clip-poly instead (a triangle maybe) but I can't animate that either. 回答1: CSS3 spinner This