css-shapes

It has been a long time since I built this triangle which points up. How can I alter my CSS to point the corner left? http://jsfiddle.net/3sP8q/ .left-corner { width: 0; height: 0; border-bottom: 15px solid #000; border-left: 15px solid transparent; border-right: 15px solid transparent; position: relative; } <div class="left-corner"></div> Albzi Here is how: .left-corner { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; } <div class="left-corner"></div> Use CSS-Tricks , it helps a lot! 来源： https://stackoverflow.com

I am trying to construct this shape in CSS: But I can't figure out how to put the triangle shape (considering I have a rectangle for the "body" of the tag and a triangle for the tip) facing right. Because I'm working with positions, how can I tell the triangle to appear right after the rectangle, when tags can all have different sizes? I just can't work it out. You can check the fiddle: http://jsfiddle.net/ExZFe/ with a similar tag to the one I'm making. This example uses just positions, so giving the triangle a fixed position is useless. I tried with :after but got stuck too, because of the

I have sidebar menu finally created. now I need create ribbon on selected item like show image (red) (I need really gray color ribbon). But I don't want use image background and use only css class. So dynamically I can remove class name and add to another item. I have a you_are_here class which selected item in that I want see ribbon. Is it possible to do that? <ul class="outer"> <li> <p class="top">My Account</p> <ul class="inner"> <li><a href="#">My Account Home</a></li> </ul> </li> <li> <p>Demographics</p> <ul class="inner"> <li><a href="#">Addresses</a></li> <li class="you_are_here"><a

Hello I'm looking to build in CSS3 an image with round corners and a very light oval shape, like in this pic. Not sure if it's possible and how. I know how to build a round image or an image with round corners, but this is a little different. UPDATE Here is what I've done .round{ background-color:red; width:100px; height:100px; border-top-left-radius: 45px 40px; border-top-right-radius: 45px 40px; border-bottom-left-radius: 45px 40px; border-bottom-right-radius: 45px 40px; } http://jsfiddle.net/7t1z3hxf/9/ UPDATE2 Here are the schematics of what I'm trying to achieve Thanks If perfect

I currently have a map. On this map I several small circles/dots created with border-radius . Hovering a dot animates the dot + other stuff. MY ISSUE: Right now I have to be VERY precise to hover a dot because it's so small. Im wondering if its possible to create a bigger invisible hitzone hover area or similar surrounding the dot, thus making it easier to interact with the dot? Here is an example : $("#map-container").find(".dot-item") .mouseenter(function() { console.log("over"); $(this).css("width","10"); $(this).css("height","10"); }) .mouseleave(function() { console.log("out"); $(this)