One way to do it is the create an inner triangle which is smaller. .triangle-left { width: 0; height: 0; border-top: 23px solid transparent; border-bottom: 23px solid transparent; border-right: 23px solid red; } .inner-triangle { position: relative; top: -20px; left: 2px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px … Read more
Well, as it turns out, I managed to solve the problem myself. I hacked together a demo — check it out. Essentially, several additional DOM elements are required and a fair amount of CSS. And as mentioned in the link provided by @Steve, a solid background is required. I don’t believe there is any way … Read more
For Firefox you can add -moz-transform: scale(.9999); to make smooth edges. In your case: .triangle { width: 0; height: 0; border-top: 0; border-bottom: 30px solid #666699; border-left: 20px solid transparent; border-right: 20px solid transparent; -moz-transform: scale(.9999); } Will do the trick.
Let’s break it into pieces: The yellow borders are actually set as transparent in the final product so they don’t show. They are yellow here to show how the borders look. As commented above, this answer shows the idea behind the basic triangle shape. The div by itself: <div id=”star-five”></div> Combining the :before pseudo element … Read more
To create a circle that gradually draws it’s outer path, use SVG. SVG’s stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS animation to gradually change the stroke-dashoffset to … Read more
2023 solution This method requires no JS, no extra element and not even any pseudos, just a handful of CSS declarations. It also works if the element has a (semi)transparent background in addition to this partial border. It uses a two layer mask, one being a conic-gradient which creates a visible pie selection and whose … Read more
According to your HTML, I get this JSFiddle. I just played with transform. .mainDiv{ position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top:100px; } .square{ width:100px; height:100px; background:#c52329; border:solid 2px #FFF; transform: skew(180deg,210deg); position: absolute; top: 43px; } .square2{ width:100px; height:100px; background:#c52329; border:solid 2px #FFF; transform: skew(180deg,150deg); position: absolute; left:102px; top: 43px; } .square3{ … Read more
I didn’t know this trick before, but I think I understand it. The bottom border isn’t square, it’s beveled on the sides. A left border would be beveled on the top and bottom. This is so borders of different colors meet cleanly. Because the arrow element has 0 height and width, the border segment is … Read more
Fiddle HTML <div id=”rectangle”></div> CSS #rectangle{ width:200px; height:100px; background:blue; } I strongly suggest you read about CSS selectors and the basics of HTML.
You need to specify the content property. For positioning, add position:relative to the parent, and then absolutely position the arrow -15px to the left. jsFiddle example .d { position:relative; } .d:before { content:”\A”; border-style: solid; border-width: 10px 15px 10px 0; border-color: transparent #dd4397 transparent transparent; position: absolute; left: -15px; }