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)", "transform-origin": "0 100%", }); Same like I want to draw cross symbol ( + ) using jquery and CSS. I

This question already has an answer here: Title with lines filling remaining space on both sides 5 answers How can I draw a line like after title text like this : "TITLE ________" In CSS ? The "_" should complete the rest of the div and fill the remaining space. web-tiki Based on this answer : h1{ overflow:hidden; } h1:after{ content:''; display:inline-block; width:100%; height:100%; margin-right:-100%; border-bottom:1px solid #000; } <h1>Title</h1> <h1>Longer Title</h1> h1 { position: relative; } h1:after { content: ""; position: absolute; border-bottom: 1px solid red; width: 100%; bottom: 0;

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; background-color: #f0f0f0; border: 1px solid #999; position: relative; } .arrow:after { content: '';

I'm looking to make a bootstrap btn look a little differently with there being a 5 point at the bottom of its base. I know its possible to do shapes this way using the :before and :after tools and transform but I want to put text inside of them which is why I'm having so much trouble. Is it possible to deal directly with the btn class to make this effect happen? You can use SkewY as shown in the demo below: div { height: 100px; width: 500px; display: inline-block; border: 10px solid green; border-bottom: none; text-align: center; line-height: 100px; position: relative; color: green; font-size:

I'm attempting to create a button style for a client, and cannot seem to get it working using the after pseudo-class. <style> $varBase: 40px; $imsblue: #012169; $imsgrey: #012169; body { background:grey; } .btn { position: relative; float: left; height: $varBase; font-family: sans-serif; text-align: center; line-height: $varBase; color: white; white-space: nowrap; text-transform: uppercase; background: $imsblue; &:before { float: left; content:""; width: ($varBase/4); height: ($varBase/2); } &:after { position: absolute; content:""; height: ($varBase/2); border-left: ($varBase/2) solid

I've searched a lot on the internet and couldn't find any solution on my problem. I would like to justify/wrap my text inside a triangle to follow its border shape. I've made an example using a parallelogram, but the result isn't satisfying. .parallelogram { width: 200px; padding: 20px; -webkit-transform: skew(-30deg); -moz-transform: skew(-30deg); transform: skew(-30deg); background: #ccc; margin: 80px; } .parallelogram .text { width: 200px; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); transform: skew(30deg); margin: 20px; } http://jsfiddle.net/HarrysNature/noqa6qLc/3/ Any

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. 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 final shape. <svg viewBox="0 0 100 100" width="200"> <path d="M50 10 C 100 10, 100 90, 50 90" stroke="green"