Question about using CSS to make shapes…I want to replicate the ribbon like heading on the right sidebar on http://phydeaux.com/locations/cary/. where it says Upcoming Events…that is done with graphics for triangular ends…I know you can do this in pure CSS with the before and after elements, but not sure the actual CSS to do that
Anyone know?
Thanks!
Thanks!
Off the top of my head and late at night maybe something like this to start.
Of course its a bit magic numberish and the text can’t wrap.
Maybe I’ll think of something better tomorrow. 
There is a nice reference here for CSS shapes. The Pointer one is probably closest to what you want. You could maybe adapt it.
This is the “pointer” adapted to have the notch in both ends.
Though it still relies on fixed dimensions. Maybe with some more work it could be adapted to a dynamic size.
Also the left notch does not have transparency, so it has been constrained to the background colour. That will be OK on plain solid backgrounds only.
That’s basically the same method that I came up with using the border but using a transparent notch so that it doesn’t obscure the background
You can lose the extra span in my example as that was only need to put a black border all the way around the whole thing including the notch.
I put in a second example using one element and a pseudo border using a filter.
Just need to work on making it expand in height but percentage borders aren’t a thing
I’m trying to make one that fits the content, but it’s still WIP.
My example will do that if you use inline flex.
You can make space at the end with a solid transparent border and then use background-clip:padding-box to stop the red background bleeding through.
I’m sure you’ll find other ways to do it anyway
When you said it was magic numberish, I assumed it would be a fixed size.
There is still the problem with wrapping, which is a tough one.
But then there comes a point where you have to leave CSS shapes and go with SVG.
Yes I was thinking the same thing:)
However that set me thinking and it can be done with one element and no extra before or after elements if we use clip path. That will allow the element to stretch as required.
Clip-path is looking like a good solution.
More robust, while less complex.
Hi there kaevans,
have you considered using SVG as a possible alternative?
There is, of course, extra HTML but that is compensated
by a little less CSS. 
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>svg banner</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.6em sans-serif;
}
h1 {
font-size: 1.5em;
color: #666;
text-align: center;
text-transform: capitalize;
}
.banner{
max-width: 16em;
margin: auto;
}
</style>
</head>
<body>
<h1>an alternative method</h1>
<div class="banner">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 330 62">
<defs>
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-opacity="0.75"/>
</filter>
</defs>
<path d="M 4 4, 324 4, 304 30, 324 56, 4 56, 24 30z"
stroke="#dad189" stroke-width="2" fill="#8b5e3c" filter="url(#shadow)"/>
<text x="44" y="37" font-size="1.5em" fill="#dad189" filter="url(#shadow)">
This is a svg banner
</text>
</svg>
</div>
</body>
</html>
coothead
Thank you all, one of those should work dandy
Try html 5 canvas. No doubt there’s a good book on it somewhere on this site.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.