Hi I’m struggling like a madman tring to create a shield/badge here with a dotted inner border (3px inside of the div)
However im struggling like a madman. I Thought I would need to create to triangle to achieve this effect after releasing I wouldn’t know what to do get the dotted effect, I though I should ask here.
Here is my failed attempt:
Any help would be much appreciated
The Codepen is showing a blank screen.
When you use codepen, you don’t include the head and body elements in the html section. Treat it as if the html box is the body element.
Then all your javascript should go into the javascript box.
Any libraries of frameworks you intend to use can be linked in the Settings.
Edit: It finally loaded after some considerable time and I see the page.
maybe anothe pdudoo elemnt [quote=“SamA74, post:2, topic:298746”]
, you don’t include the head and body elements in the html section. Treat it as if the html box
[/quote]
Hi thanks for your reply Sam.
I did not have any problems loading it , but i’ll remove the <head>
I’m glad you where able to load it after all
Edit: after trying to remove the head it was not displayed correctly
Did you edit the settings to include the libraries you use as @SamA74 mentioned?
Here is a fork of the pen:-
You will see it loads much quicker and does not show the red ! icon in the html box.
Hi there frederikwalle,
this problem suggests a “SVG” solution…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
h1 {
max-width: 9em;
font-size: 1em;
}
</style>
</head>
<body>
<h1>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 160 170">
<a xlink:href="https://example.com">
<path d="M5 5 155 5 155 122.5 80 165 5 122.5Z" fill="#fff" stroke="#000" stroke-width="1"/>
<path d="M10 10 150 10 150 120 80 160 10 120Z" fill="#ffc000" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 3"/>
<text x="45" y="80">Site Title</text>
</a>
</svg>
</h1>
</body>
</html>
coothead
Thanks sam for showing me. Ill be sure to keep that in mind.
<offtopic>
I’ve always wondered, how does one create an SVG like that? I assume you’re not typing it by hand? 
Something like inkscape or illustrator maybe?
</offtopic>
Yeah probably much better To much hassling with before after classes.
Thanks alot for your help,
care to reveal how you created this ?
Your assumption is incorrect. 
When I come to think of it, as a recluse, I do everything by hand. 
coothead
well I guess its an industry secret 
Anyway thanks alot for the help
Actually, it is quite possible to do “by hand”. It’s a matter of understanding what parameters do what, plugging in best-guess values, and tweaking until satisfied.
Of course the more experience you have the better the best-guess will be and the more persistent you are the more likely you’ll reach “satisfied”. But it can definitely be done.
For simple geometric shapes like that, it’s not too difficult to write the code by hand. you are basically plotting coordinates on a virtual canvas.
But for more complex/creative imagery I find it easier to use some kind of graphics app/GUI. Both Illustrator and Inkscape can output to SVG, among others.
Here’s an example using CSS clip-path and repeating-linear-gradient that will allow it to adjust to longer strings of title text.
Only for modern browsers supporting clip-path though.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chevron Logo with Inset Border</title>
<style>
.title {
display: table; /*shrink to fit content*/
position: relative;
font-family: helvetica, sans-serif;
background: #FFC000;
padding: 3px 3px 2px;
margin-bottom: 40px;
}
.title:after { /* 3px padding below dashed angle border*/
content: "";
height: 30px;
background: #FFC000;
position: absolute;
left:0; right:0; bottom: -30px;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.title h1 {
position: relative;
margin:0;
padding: 20px 4px;
font-size: 1.4em;
text-transform: uppercase;
border: 1px dashed #0275D4;
border-bottom: none;
text-align: center;
}
.title h1:before { /*fill in above the dashed angle border*/
content: "";
position: absolute;
z-index: 2;
left:0; right:0;
bottom: -27px; /* 1px difference to show the :after element*/
height: 28px;
background: #FFC000;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.title h1:after { /* this is the dashed border on an angle*/
content: "";
position: absolute;
z-index: 1;
left:0; right:0;
bottom: -28px;
height: 28px;
background: repeating-linear-gradient(90deg, #0275D4, #0275D4 2px, #FFC000 2px, #FFC000 4px);
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
</style>
</head>
<body>
<h1>Chevron Logo with Inset Border</h1>
<p>Using <code>clip-path: polygon(); & repeating-linear-gradient();</code> for modern browsers.</p>
<div class="title">
<h1>Site Title</h1>
</div>
<div class="title">
<h1>Site Title Longer</h1>
</div>
<div class="title">
<h1>Site Title <br> Longer</h1>
</div>
</body>
</html>
good job sir:) Its a lot of creative guys at this forum I can see. I’m either going to use this badge as the site title, or as an alternative I could use it in the nav for the currently selected page. Ill need to test a few things to see what I like best … Also Im not sure about the color I hope its easy to adjust .
Standing on the shoulders of giants
What I really like about SVG is it resizes automatically to fit within the parent controller:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
h1 {
max-width: 9em;
font-size: 1em;
}
.bd1 {outline: solid 0px red;}
.fll {float:left;} .flr {float:right;}
.mga {margin:2em auto;}
.w10 {width:10%; max-width:1024px;}
.w20 {width:20%; max-width:1024px;}
.w30 {width:30%; max-width:1024px;}
</style>
</head>
<body>
<div class="w20 mga bd1 fll">
<a href="https://example.com">
<svg viewBox="0 0 160 170" class="dib">
<path d="M5 5 155 5 155 122.5 80 165 5 122.5Z" fill="#fff" stroke="#000" stroke-width="1"/>
<path d="M10 10 150 10 150 120 80 160 10 120Z" fill="#ffc000" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 3"/>
<text x="45" y="80">Site Title</text>
</a>
</svg>
</a>
</div>
<div class="w30 mga bd1 flr">
<a href="https://example.com">
<svg viewBox="0 0 160 170" class="dib">
<path d="M5 5 155 5 155 122.5 80 165 5 122.5Z" fill="#fff" stroke="#000" stroke-width="1"/>
<path d="M10 10 150 10 150 120 80 160 10 120Z" fill="#ffc000" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 3"/>
<text x="45" y="80">Site Title</text>
</a>
</svg>
</a>
</div>
<div class="w10 mga bd1">
<!--
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
-->
<a href="https://example.com">
<svg viewBox="0 0 160 170" class="XXXdib">
<path d="M5 5 155 5 155 122.5 80 165 5 122.5Z" fill="#fff" stroke="#000" stroke-width="1"/>
<path d="M10 10 150 10 150 120 80 160 10 120Z" fill="#ffc000" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-dasharray="1, 3"/>
<text x="45" y="80">Site Title</text>
</a>
</svg>
</a>
</div>
</body>
</html>
Hi there John,
I noticed that your Free Html Online Viewer code has overflowing text. 
Something like this…
<text>
<tspan x="50%" y="38%" text-anchor="middle">Site Title</tspan>
<tspan x="50%" y="50%" text-anchor="middle">With A Little</tspan>
<tspan x="50%" y="62%" text-anchor="middle">More</tspan>
</text>
…would be one possible cure. 
coothead
Hi there coothead I have tested this and it looks pretty great But it is has to small width unfortunately
You wouldn’t have any chance to make this badge a little wider without increasing the height ?
Frederik
Hi there frederikwalle,
The aspect ratio, at present, is 150 : 160.
What would you like it changed to?
coothead