css-shapes

I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below: The final nav will look like an extended version of this: I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here: .arrowEndOn { font-size: 10px; line-height: 0%; width: 0px; border-top: 11px solid #FFFFFF; border-bottom: 11px solid #FFFFFF; border-left: 5px solid transparent; border-right: 5px solid #FFFFFF; float: left; cursor: pointer; } .arrowBulkOn { height: 20px; background:

I am using bootstrap 3.3 in my project, I would like to style the photo using CSS. please guide me how can to do this? The preview (what I need): You can do this using svg 's clipPath and filter s for the box-shadow . The co-ordinates for the triangle were calculated using the formula for a co-ordinate on a circle: (x, y) = (r × cos(θ), r × sin(θ)) where, r is the radius of a circle and θ is the angle. The co-ordinate that is not on the circle was assumed to be a co-ordinate on a circle with radius 55px , which is 5px more than the original circle's radius( 50px ). Complete Explaination: My

I have an arrow as a SVG which's length I want to alter in response to the width of a wrapping DIV (for example). All my previous attempts have led into this behavior (scaling the whole SVG): Rather than this, I want to achieve this behavior: Is it possible to just alter single shapes inside of a SVG by simply adding percentual values to the code? If not, how could I perform this? SVG as code: <svg width="35px" viewBox="0 0 35 985" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Group" stroke="none" stroke-width="1" fill="none" fill-rule=

How do i make this type of pentagone without -webkit-clip-path because its doesn't work most of the browser like Firefox, IE9. My code: http://codepen.io/anon/pen/MYbKrQ div { width: 150px; height: 150px; background: #1e90ff; -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); } /* Center the demo */ html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; } <div></div> You could directly use svg . <svg width="150" height="150"> <path d="M0,0 h125 l25,75 l-25,75 h-125z"

Just launched this website ( http://dovidoved.org/ ) and the client wants one of those triangles / arrows on the top of each drop down menu. Problem is the menu has a border around it and the arrow should mesh with both the background as well as the border. Not sure how to do that. Any suggestions? Must I have to use an image? Here's my CSS: /* creates triangle */ .main-navigation ul ul:before { border-bottom: 10px solid #fae0bb; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; height: 0; position: absolute; right: 0; top: -10px; width: 0; } .main

I would love to code simple image painting in HTML, CSS and probably jQuery also. Let's say I have a original image, and I want make it colorized but only in part of hover (or 10x10px square or circle of image where cursor is). I applied some filters to make it grayscale with CSS, but I have no idea how to colorize only hover part (not whole picture). Example image of best result (keeping colorized advice would be great, but not necessarily). You could do this using svg 's mask and filter . CodePen var img = document.getElementById('img'); img.addEventListener('mousemove', function(e) {

Need to add gradient effect for borders. borders are triangle shaped here is the jsfiddle code .progress-indicator-wrapper { margin: 0 10px; font-size: 16px; color: #2f2f2f; background-image: linear-gradient(to bottom, #e7e7e7, #d8d8d8); } .progress-indicator { display: table; width: 100%; text-align: center; line-height: 20px; } .progress-indicator > div { display: table-cell; margin-top: 0; padding: 20px; position: relative; } .progress-indicator > div.progress-active::before { content: " "; position: absolute; left: 0; top: 0; border-top: 30px solid transparent; border-bottom: 30px solid