css-shapes

Problem My navbar looks like this: HTML and CSS nav { width: 1040px; } nav ul { display: block; list-style-type: none; height: 40px; border-top: 3px solid #222; } nav ul li { width: 130px; display: inline-block; line-height: 40px; text-align: center; font-size: 16px; font-family: Vollkorn; font-weight: 400; } nav ul li a { display: block; text-decoration: none; color: #333; } nav ul li a:hover, nav ul li a:focus { color: #000; box-shadow: 0px 0px 2px black; border-radius: 10px; border: 2px solid #222; border-top: 0px; transition: 0.2s ease all; } <nav> <ul> <li><a href="#">Home</a> </li> <li>

I want to make a Table like this is it possible to add a slanted diagonal border in table? Based on CSS3 linear-gradients solution except that the angle is not hard coded: table:nth-of-type(1) td { background-image: linear-gradient( to top right, white 48%, black, white 52% ); } table:nth-of-type(2) td { background-image: linear-gradient( to top right, papayawhip calc(50% - 1px), black, papayawhip calc(50% + 1px) ); } /* for testing */ table { border-collapse: collapse; margin-top: 1em; margin-bottom: 1em; } td:nth-child(odd) { width: 10em; } td:nth-child(even) { width: 20em; } <table border=

I am trying to make a point burst thing like the image below: Currently, I have tried this using pseudo elements, however, I was only able to generate a 12 point burst and does not reflect that which is displayed within the image. Is there anyway to create a point burst with only a few elements? Below is the code I have used to attempt this solution: div{ width:100px; height:100px; background:grey; transform:rotate(45deg); margin:50px; } div:after{ position:absolute; content:""; background:grey; width:100px; height:100px; transform:rotate(135deg); } div:before{ position:absolute; content:"";

Here is an image of the design which I am trying to achieve with only CSS. How do I achieve such border for the container div so that I can place transparent logo and text in between the gaps. This design will go on a video background. The black background is just for illustration purpose. So far I have tried to achieve something like this as a test: body { background: black; } p { color: #ffffff; font-size: 16px; text-align: center; padding: 30px; } .steps-frame-1 { margin-top: 60px; width: 50%; height: 200px; margin-left: auto; margin-right: auto; } .steps-frame-1 { border: 0; position:

How can I make this box in CSS? I've seen a few tutorials that teach how to create boxes with arrows, however, in my case, none of those tutorials are suitable. Hristo I created your element with the surrounding 1px border. I'm using one <div> element and taking advantage of the :before and :after pseudo-elements ( browser-support ). The main rectangle has a regular 1px border, but the triangle elements are essentially 2 triangles, one darker than the other. The lighter triangle sits on top of the darker triangle, which has the effect of hiding it, and is shifted slightly to the left to show

I created an countdown timer. I got a border which is made circular. As the timer is tending towards zero, the circular border should change color with decrement in the seconds. I created the JSFIDDLE HTML <div class="outer"> <button class="btn btn-default btn-timer">0.00</button> </div> JS CODE var displayminutes; var displayseconds; var initializeTimer = 1.5 // enter in minutes var minutesToSeconds = initializeTimer*60; $("#document").ready(function(){ setTime = getTime(); $(".btn-timer").html(setTime[0]+":"+setTime[1]) }); $(".btn-timer").click(function(){ var startCountDownTimer =