css-shapes

How to make a box with arrow in CSS? [duplicate]

by

Like this : .arrow { border: solid 10px transparent; border-right-color: #FFF; } Demo : http://jsfiddle.net/sparkup/edjdxjf2/ UPDATE : It can also be achieved without empty elements with the css property :before element:before { content: “”; position: absolute; top: 50%; // half way down (vertical center). margin-top: -15px; // adjust position, arrow has a height of 30px. … Read more

Make table cells square

by

New answer : To make the table cells square, you can use the aspect-ratio property on a div inside the td element. Like this : table { width: 90%; } td { width: 33.33%; position: relative; } td .content { aspect-ratio: 1 / 1 ; background: gold; } <table> <tr> <td><div class=”content”>1</div></td> <td><div class=”content”>1</div></td> <td><div … Read more

How to create multi-color border with CSS?

by

You can do it without pseudo-elements, just with border-image: linear-gradient .fancy-border { width: 150px; height: 150px; text-align:center; border-top: 5px solid; border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5; } <div class=”fancy-border”> my content </div>

CSS Circle with border

by

You forgot to set the width of the border! Change border: red; to border:1px solid red; Here the full code to get the circle: .circle { background-color:#fff; border:1px solid red; height:100px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; width:100px; } <div class=”circle”></div>