I have a shape I'm trying to put on top of a text box with a background image. This shape will go in different sized containers and scale responsively. The issue I'm having is the background image scales as well, and I would like for it to stay the same size without using a clip path. Please see the code for what I'm talking about. This is driving me crazy!
.container {
width: 75%;
}
.box {
background-image: url("https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg");
padding-top: 5px;
padding-left: 25px;
padding-right: 20px;
padding-bottom: 5px;
margin-top: -5px;
}
p {
color: white;
}
<div class="container">
<svg width="100%" height="auto" viewBox="375 265 1268 45.3">
<defs>
<pattern id="img1" height="30%" width="30%"
patternContentUnits="objectBoundingBox"
viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice"
xlink:href="https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg" />
</pattern>
</defs>
<path d="M369,291.8v19.7h1280v-22.7c0,0-137-21.6-277-21.6c-308,0-534,34.9-726,34.9C460,302.2,369,291.8,369,291.8z" fill="url(#img1)" />
</svg>
<div class="box">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
</p>
</div>
If you change the percentage size of the container, you'll see what I'm talking about.
Thanks for the help!
For a start you will need to get rid of the viewBox in the SVG. That causes the SVG to get scaled, and that affects anything in the SVG. You'll also want the pattern to be 1:1, so that means switching to patternContentUnits="userSpaceOnUse" and have the pattern use the image at actual size.
We are also using overflow:hidden so that the non-scaling SVG will not force the parent SVG to be wider.
This gets you close. The pattern is now 1:1 but it doesn't exactly line up with the HTML one because they have differing pattern origins. You can adjust that by tweaking the x and y attributes of the pattern until it lines up correctly. I'll leave that to you.
.container {
width: 75%;
overflow: hidden;
}
.box {
background-image: url("https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg");
padding-top: 5px;
padding-left: 25px;
padding-right: 20px;
padding-bottom: 5px;
margin-top: -5px;
}
p {
color: white;
}
<div class="container">
<svg width="1268" height="45.3">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="881" height="192">
<image width="881" height="192"
xlink:href="https://s22.postimg.org/dhkk3e8sh/Blue_881.jpg" />
</pattern>
</defs>
<path transform="translate(-375 -265)"
d="M369,291.8v19.7h1280v-22.7c0,0-137-21.6-277-21.6c-308,0-534,34.9-726,34.9C460,302.2,369,291.8,369,291.8z" fill="url(#img1)" />
</svg>
<div class="box">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec tamen ille erat sapiens quis enim hoc aut quando aut ubi aut unde
</p>
</div>
Related
How do I get the SVG to clip inside its container? I would like the blue circle not to be visible outside the red rectangle (like overflow:none; for divs). Although in this example, the SVG is a circle, in my case, it's a complicated SVG.
#text {border:1px solid green;}
#svg_container {height: 50px;border:1px solid red;}
svg {
position: absolute;
top: -40px;
left: -65px;
}
<div id="text">
The Lorem to the Ipsum is going to bing to the bang
</div>
<div id="svg_container">
<svg viewbox="-3 -3 9 9" width="180px">
<circle fill="darkblue" cx="3" cy="3" r="3" />
</svg>
</div>
<div id="more-text">
No dolor sit amet in this document, that's not what we're going for here. consectetur means consecutively.
</div>
As #ccprog mentions, add some properties to the #svg_container. It moves the SVG, so I changed the viewbox to demonstrate that the clipping is happening as desired.
#text {border:1px solid green;}
#svg_container {
height: 50px;
border:1px solid red;
position:relative;
overflow:hidden;
}
svg {
position: absolute;
top: -40px;
left: -65px;
}
<div id="text">
The Lorem to the Ipsum is going to bing to the bang
</div>
<div id="svg_container">
<svg viewbox="0 0 9 9" width="180px">
<circle fill="darkblue" cx="3" cy="3" r="3" />
</svg>
</div>
<div id="more-text">
No dolor sit amet in this document, that's not what we're going for here. consectetur means consecutively.
</div>
I am wondering if there were a way to use inline HTML like <sup> and <sub> elements in SVG?
For example:
<svg>
<text x="0" y="12">Some text with a superscript <sup>1</sup> and a subscript <sub>2</sub>.</text>
</svg>
I can not find anything about using inline HTML elements in SVG. I am hoping to use superscript without having to use a styled <tspan>.
A possible solution to your problem is using tspan elements and the attribute baseline-shift like so:
tspan[baseline-shift]{font-size:50%;}
<svg viewBox="0 0 350 40">
<text x="0" y="12">Some text with a superscript <tspan baseline-shift="super">1</tspan> and a subscript <tspan baseline-shift="sub">2</tspan>.</text>
</svg>
I can not find anything about using inline HTML elements in SVG. I am
hoping to use superscript without having to use a styled <tspan>.
You can use for these purposes: foreignObject
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="100">
<style type='text/css'>
svg { border: 1px solid black; }
svg div {
border: 1px dotted blue;
padding:1em;
}
</style>
<foreignObject class="node" x="16" y="22" width="400" height="100">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>Some text with a superscript <sup>1</sup> and a subscript <sub>2</sub></div>
</body>
</foreignObject>
</svg>
Example for wrapping multi-line text in svg just like in HTML
svg {
border: 1px solid black;
}
svg div{
border: 1px dotted blue;
padding: 1em;
}
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500">
<foreignObject class="node" x="46" y="22" width="200" height="500">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. </div>
</foreignObject>
</svg>
I have tried many things to get the superscript, and it is not supported the same across browsers.
For Firefox...
tspan.sup { font-size: 50%; dominant-baseline: hanging; }
For Chrome (and Inkscape)...
tspan.sup { font-size: 50%; baseline-shift: super; }
When both styles are used, Chrome will apply the baseline-shift, but it will not be entirely superscript. Inkscape will apply the baseline-shift correctly even with dominant-baseline present. It may be a case of choosing the browser you want to support.
And a non-CSS method.
<text x="0" y="14">Some text<tspan dy ="-10">1</tspan></text>
# If there is more text is after the tspan, do the following.
<text x="0" y="14">Some text<tspan dy ="-10">e</tspan> <tspan dy="10">with more text.</tspan></text>
Maybe from the title above some of you will become confused, But it exactly as the title said, I want to make this pipeline design using CSS, I think I can achieve it using border but how can I add the round bullet like in the image below?
to make it easier, my layout will look like this:
First row : Image 1 & text
second row : Text & Image 2
Third row : Image 3 & text
fourth row : Image 4
so this is some question I want to ask:
Can I make this kind of line using the border?
How can I make the line stop in the middle like before the Image 4?
How can I make the bullet in the middle of the line that will match the line even when we check it in some device (exclude the mobile view around 576px)?
Can someone help me with this problem? for the first question, I think we can use
1. First Row :
border-right: solid 1px blue;
border-bottom : solid 1px blue;
border-bottom-right-radius : 10px;
2. second Row :
border-left: solid 1px blue;
border-bottom : solid 1px blue;
border-bottom-left-radius : 10px;
3. Third Row :
border-right: solid 1px blue;
border-bottom : solid 1px blue;
border-bottom-right-radius : 10px;
4. Fourth Row :
border-left: solid 1px blue;
border-bottom : solid 1px blue;
border-bottom-left-radius : 10px;
width: 50% (?)
Edit 1
for question one currently I make this CSS code like this:
#first-row-left{
border-left: solid 3px blue;
border-bottom: solid 3px blue;
border-bottom-left-radius: 20px
}
#first-row-right{
border-bottom: solid 3px blue;
}
#second-row-left{
border-bottom: solid 3px blue;
}
#second-row-right{
border-right: solid 3px blue;
border-bottom: solid 3px blue;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px
}
#third-row-left{
border-left: solid 3px blue;
border-bottom: solid 3px blue;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px
}
and it looks like this
As you can see there is slight miss in before the pipeline change the row like from first to second row
Edit 2 I already make a fiddle for this, you can try it in here:
Click here to see the fiddle
Edit 3
Based on #Alexwc_ , I tried to change his code into CSS intead of SCSS, but it seems I miss something in here
SCSS from #Alexwc_ after I convert it to CSS:
this is the fiddle I made : Check in here
Here's one method. Perhaps not the cleanest, and it hasn't been adapted for mobile.
Here is a pen of the work using SCSS.
Here is a pen of the work using CSS. (Please note that I converted SCSS to CSS using this tool)
CAVEATS:
this was not put into a SO snippet because (for whatever reason) it doesn't display correctly.
I've tested only on Mac OS Chrome/Chrome Canary/FF/FFDE/Safari
On the CodePen I used SCSS
My CSS/SCSS/variables may cause some snickering as I'm no pro at it, and it feels a little hacky... but perhaps other edge-ish cases may cause the same feeling.
I did not see that you had posted your own markup while I was writing this out. Apologies for that.
The bullets can be edited to however you like, I figured the bullet styles weren't the real issue here.
CSS:
:root {
--width: 5px;
--border-radius: calc(var(--width) * 2);
--button-width: 30px;
--button-left-pos: -12.5px;
}
.row {
margin: 0 20px;
}
img {
border-radius: 10px;
}
.one, .two, .three, .four {
position: relative;
}
.one::before, .one::after, .two::before, .two::after, .three::before, .three::after, .four::before, .four::after {
position: absolute;
top: var(--button-width);
left: var(--button-left-pos);
content: "";
height: 30px;
width: 30px;
background: black;
border-radius: 100px;
}
.one::after, .two::after, .three::after, .four::after {
width: calc( var(--button-width) / 2 );
height: calc( var(--button-width) / 2 );
background: red;
top: calc(var(--button-width) + var(--button-width) / 4 );
left: -5px;
}
.two::before, .two::after {
right: var(--button-left-pos);
left: initial;
}
.two::after {
right: -5px;
}
.one::after {
width: calc( var(--button-width) / 2 );
height: calc( var(--button-width) / 2 );
background: red;
top: calc(var(--button-width) + var(--button-width) / 4 );
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "left right";
position: relative;
}
.row:last-child {
grid-template-areas: "border ..." "full full";
}
.row .left, .row .right {
padding: var(--button-width);
}
.one .left {
padding-top: 0;
border-left: var(--width) solid;
border-bottom: var(--width) solid;
border-bottom-left-radius: var(--width);
}
.two {
top: calc(var(--width) * -1);
}
.two .right {
border-right: var(--width) solid;
border-top: var(--width) solid;
border-top-right-radius: var(--width);
border-bottom-right-radius: var(--width);
border-bottom: var(--width) solid;
}
.three {
top: calc(var(--width) * -2);
}
.three .left {
border-left: var(--width) solid;
border-top: var(--width) solid;
border-top-left-radius: var(--width);
border-bottom-left-radius: var(--width);
}
.four {
top: calc(var(--width) * -3);
}
.four::before, .four::after {
top: 85px;
}
.four::before {
left: calc(50% - 17.5px);
}
.four::after {
top: 92.5px;
left: calc(50% - 10.5px);
}
.four .border {
height: 200px;
display: block;
border-right: var(--width) solid;
border-top-right-radius: var(--width);
position: relative;
}
.four .border::before {
content: "";
position: absolute;
height: var(--width);
background: black;
top: 0;
width: calc(100% + var(--width));
transform: rotate(180deg);
border-bottom-left-radius: var(--width);
border-top-right-radius: var(--width);
}
.border {
grid-area: border;
}
.full-width {
grid-area: full;
justify-self: center;
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
HTML:
<div class="row one">
<div class="left">
<img src="https://via.placeholder.com/450x250" alt="">
</div>
<div class="right">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- one -->
<div class="row two">
<div class="left">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="right">
<img src="https://via.placeholder.com/450x250" alt="">
</div>
</div>
<!-- two -->
<div class="row three">
<div class="left">
<img src="https://via.placeholder.com/450x250" alt="">
</div>
<div class="right">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- three -->
<div class="row four">
<div class="border border-top"></div>
<div class="full-width">
<img src="https://via.placeholder.com/900x500" alt=""></div>
</div>
<!-- four -->
You may consider using SVG. Following code is a sample code to draw path and circle.
<!DOCTYPE html>
<html>
<body>
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
`#first-row-left:before
{
content: '';
display: inline-block;
position: absolute;
border-radius: 50%;
left: 0;
width: 10px;
height: 10px;
z-index: 3;
top: 25px;
}`
try something like this...
You can use the border-image property to draw a custom svg for your border. Have a look at this article to see an example.
The Round bullet can be done with an external div like
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id='bullet'></div>
</body>
</html>
#bullet{
background-color:#fff310;
height:10px;
width:10px;
border-radius:50%;
border:0.1px solid red;
}
I got a place on my CSS Grid where I am inserting a paragraph of about 15 characters long, I would like to add a background element to it and I want it to have some personality so am using a inline SVG content.
I tried to place it at the bottom with a position:relative but when you change the view-port size it doesn't scale well. I wrapped the SVG code in a container:
.marquee-container {
height: 0;
position: absolute;
width: 500px;
}
And the styles of the SVG:
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
This is the HTML Markup
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%"/>
<div class="main-content">
<div class="marquee-container">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;"
xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat
maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
My item is inside a CSS Grid Layout where post is the class I am using to style the contents of the paragraph. Which is not inside any grid-template-areas, its just a class within an area already defined.
.post {
text-align: left;
position: relative;
z-index: 1;
}
So the scaling doesn't go well, I would like to place the element at the background of the paragraph to be contained, what is the best approach?
.marquee-container {
height: 0;
position: absolute;
width: 500px;
}
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
.post {
text-align: left;
position: relative;
z-index: 1;
}
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%" />
<div class="main-content">
<div class="marquee-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
Since you are positioning the .marquee-container absolutely.
You need a parent to have position set to relative, So, add position: relative on the parent .main-content.
I don't understand why you set the .marquee-container height to 0.
I would suggest set it's height to auto and have a bottom: 0;, (As you wanted it to be aligned to bottom of the container).
Set the width to 100% since you want it to be scalable. also add a negative z-index so that the element doesn't cover up the contents.
Check the snippet below.
.main-content {
position: relative;
}
.marquee-container {
position: absolute;
bottom: 0;
height: auto;
width: 100%;
z-index: -5;
}
.svg-marquee {
fill: teal;
stroke-width: 4;
stroke-miterlimit: 10;
cursor: pointer;
transition: .5s;
}
.post {
text-align: left;
position: relative;
z-index: 1;
}
<div class="home-works">
<div class="head">
<h1>Entries</h1>
</div>
<img class="thumbnail" src="img/profile-picture.png" width="100%" />
<div class="main-content">
<div class="marquee-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
<path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
</svg>
</div>
<div class="post">
<h3>title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
</p>
</div>
</div>
</div>
I have a div and I need to give it an angular point. The height will vary based on its content so using pseudo content and borders like in the article below wont work.
http://css-tricks.com/snippets/css/css-triangle/
As this is a progressive enhancement I only need to support modern browsers.
An alternate answer, using gradients and pseudo elements
#one {height: 100px;}
#two {height: 200px;}
.corner {
width: 100px;
background-color: green;
margin: 10px;
position: relative;
}
.corner:after, .corner:before {
content: "";
position: absolute;
left: 100%;
width: 40px;
height: 50%;
}
.corner:before {
top: 0px;
background: linear-gradient(to top right, green 50%, transparent 51%);
}
.corner:after {
bottom: 0px;
background: linear-gradient(to bottom right, green 50%, transparent 51%);
}
<div id="one" class="corner"></div>
<div id="two" class="corner"></div>
You could do this using svg.
svg's(background) height totally depends on #content's(text) height.
Demo on CodePen
#container {
position: relative;
}
svg {
position: absolute;
z-index: -1;
}
#content {
position: relative;
word-break: break-all;
width: 110px;
padding: 10px;
box-sizing: border-box;
}
<div id="container">
<svg id="bg" width="150" height="100%" viewBox="0 0 150 100" preserveAspectRatio="none">
<path d="M0,0 h110 l40,50 l-40,50 h-110z" fill="#6ED901" />
</svg>
<div id="content">This content is dynamic and the height of the triangle will change with the height of the content. The width is fixed. Try adding some more text and see the height change. Also, notice the padding.</div>
</div>
CSS clip-path
This uses clip-path property, which is not supported by many modern browsers.
#one {
width: 300px;
background-color:#6ED901;
padding:10px;
word-break: break-all;
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
span{
width:240px;
display:block;
}
<div id="one"><span>Dynamic. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span></div>
CSS - Gradients
Browser support for CSS gradients is fairly good. Please note that this is essentially the same as Vals' answer, but just with a dynamic height.
.shape {
width: 200px;
background-color: #6ED901;
position: relative;
word-break:break-all;
text-align: justify;
padding: 10px 0 10px 10px;
}
.shape:after, .shape:before {
content: "";
position: absolute;
left: 100%;
width: 80px;
height: 50%;
}
.shape:before {
top: 0px;
background: linear-gradient(to top right, #6ED901 50%, transparent 51%);
}
.shape:after {
bottom: 0px;
background: linear-gradient(to bottom right, #6ED901 50%, transparent 51%);
}
<div class="shape">Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi "Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi Hi</div>
CSS + JS
The following solution uses CSS and JS and works cross-browser. The JS was provided by web-tiki.
var height = document.getElementById('one').offsetHeight/2;
document.getElementById('two').style.borderTopWidth = height + 'px';
document.getElementById('two').style.borderBottomWidth = height + 'px';
*{
margin:0;
padding:0;
}
#one{
width:200px;
background-color:#6ED901;
display:block;
word-break: break-all;
padding:10px;
float:left;
}
#two{
display:block;
float:left;
position:absolute;
left: 220px;
width:0px;
height: 0;
border-style: solid;
border-right-width:0;
border-left-width:80px;
border-color: transparent transparent transparent #6ED901;
}
<div id="wrap">
<div id="one"> ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg ghjg</div>
<div id="two"></div>
</div>
I would try with SVG in the background:
div {
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100"><rect x="-5" y="-5" width="90" height="110" fill="#fff" /><polygon fill="green" points="0,0 80,50 0,100"/></svg>');
background-position:100% 50%;
background-size:auto 100%;
background-repeat:no-repeat;
background-color:green;
}
http://jsfiddle.net/wm1am7ry/
Note: the SVG image has a white background rectangle and a green triangle. So it won't work if the background under arrow isn't a solid color.
If the width was fixed you could put the SVG to a generated content positioned outside the green box which would make it possible to avoid white background under the arrow:
http://jsfiddle.net/wm1am7ry/1/
div {
background-color:green;
padding:20px;
margin:10px 0;
width:100px;
position:relative;
}
div::after {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:100%;
width:100%;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 100"><polygon fill="green" points="0,0 80,50 0,100"/></svg>');
background-position:0 50%;
background-size:auto 100%;
background-repeat:no-repeat;
}
This can also be done by using skew and rotate
.cont {
margin: 20px 0;
}
.arrow {
background: #6ED901;
padding: 10px;
position: relative;
width: 100px;
}
.arrow:after {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: #6ED901;
top: 0;
transform: skew(14deg, 19deg) rotate(43deg);
transform-origin: right;
z-index: -1;
right: 0;
}
.cont {
overflow: hidden;
}
<div class="cont">
<div class="arrow">. Proin faucibus arcu quis ante.Proin faucibus arcu quis ante.Proin faucibus arcu quis ante.Proin faucibus arcu quis ante. Proin faucibus arcu quis ante.</div>
</div>
<div class="cont">
<div class="arrow">Proin faucibus arcu quis ante.Proin faucibus arcu.Proin faucibus arcu quis ante.Proin faucibus arcu.</div>
</div>
<div class="cont">
<div class="arrow">Proin faucibus arcu quis ante.Proin faucibus arcu.</div>
</div>