I need to create this kinda shape in the image below which contains text in it.
This is how I tried :
HTML
<div class="header-bottom">
<div class="blue-rectangle">
<p>sadasdasdasd</p>
</div>
<div class="blue-rectangle">
<p>dsasdasdasda</p>
</div>
</div>
CSS
.header-bottom{
position: absolute;
right:13%;
bottom:5%;
}
.blue-rectangle {
background-color: rgba(3,78,136,0.7);
padding: 10px 20px 10px 200px;
margin-bottom: 20px;
}
.blue-rectangle p{
color:white;
text-transform: uppercase;
font-size:18px;
}
i tried adding transform:skew but it skews both right, left and the text itself.
.shape{
text-align:center;
background-color:rgba(3,78,136,0.7);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:20px auto;
position:relative;
}
.shape:before{
content:"";
width:0px;
height:0px;
border-top:60px solid rgba(3,78,136,0.7);
border-left:60px solid transparent;
position:absolute;
right:100%;
top:0px;
}
<div class="shape">
something something
</div>
<div class="shape">
something else
</div>
I like to use a :before pseudo class for this:
.blue-rectangle {
color:white;
text-transform: uppercase;
font-size:18px;
padding: 10px 20px 10px 200px;
background-color: rgba(3,78,136,0.7);
width: 200px;
position: relative;
margin-left: 50px;
}
.blue-rectangle:before {
content: "";
position: absolute;
border: 21px solid transparent;
border-top-color: rgba(3,78,136,0.7);
border-right-color: rgba(3,78,136,0.7);
right: 100%;
top: 0;
width: 0;
height: 0
}
<p class="blue-rectangle">sadasdasdasd</p>
Please try following code
.header-bottom {
position: absolute;
right: 13%;
bottom: 5%;
}
.blue-rectangle {
height: 60px;
background-color: rgba(3, 78, 136, 0.7);
padding: 10px 20px 10px 200px;
margin-bottom: 20px;
position: relative;
}
.blue-rectangle p {
color: white;
text-transform: uppercase;
font-size: 18px;
position: relative;
}
.blue-rectangle:before {
content: '';
width: 0;
height: 0;
border-top: 80px solid rgba(3, 78, 136, 0.7);
border-left: 80px solid transparent;
position: absolute;
top: 0;
right: 100%;
}
<div class="header-bottom">
<div class="blue-rectangle">
<p>sadasdasdasd</p>
</div>
<div class="blue-rectangle">
<p>dsasdasdasda</p>
</div>
</div>
for infos :
background gradient and background size can be used too :)
.shape{
text-align:center;
background:
linear-gradient(65deg , transparent 50%,rgba(3,78,136,0.7) 50%) left no-repeat,
linear-gradient(0deg , rgba(3,78,136,0.7),rgba(3,78,136,0.7)) 30px 0 no-repeat;
background-size:30px 100%, 100% 100%;
width:200px;
height:60px;
line-height:60px;
padding:0 20px;
color:white;
margin:20px auto;
position:relative;
}
body {
background:url(http://lorempixel.com/640/480);
background-size:cover;
}
<div class="shape">
sometext
</div>
<div class="shape">
something else
</div><div class="shape">
some more text
</div>
<div class="shape">
and so on n on
</div>
In your case, you can't use skew. Instead, you should add a rotated triangle on the left.
Try add:
.blue-rectangle:before {
content: "";
border-left: 78px solid transparent;
border-top: 78px solid rgba(3,78,136, 0.7);
position: absolute;
top: 0;
left: -78px;
opacity: 0.7;
}
You may do the rest of the tuning yourself.
Related
I have CSS code
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
text-align: center;
color: white;
padding-top: 10px;
}
#box::before,
#box::after {
content: "";
width: 0;
height: 0;
right: 0;
position: absolute;
}
#box::before {
border-right: 10px solid blue;
border-top: 10px solid blue;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
bottom: -20px;
}
#box::after {
border-right: 10px solid blue;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid blue;
position: absolute;
top: -20px;
}
<div id="box">#box</div>
which gives some shape like
shape I need is
I need curved line instead of hypotenuse in triangles at top-right (#box::before) and bottom-right (#box::after) as in image.
Is there any way to achieve using pure CSS ?
codesandbox demo
Thanks
You can create a concaved radius using the box-shadow property.
This technique creates a transparant square with overflow hidden.
It then creates a transparant circle with a box shadow.
We then adjust the position of the circle to only view 1 quarter of
it.
SNIPPET
#box {
position: relative;
width: 200px;
height: 50px;
background-color: blue;
border-radius: 9999px 0 0 9999px;
margin: 30px;
text-align: center;
color: #fff;
padding-top: 10px;
}
#top,
#bottom {
position: absolute;
height: 30px;
width: 30px;
right: 0;
overflow: hidden;
}
#top {
top: -30px;
}
#bottom {
bottom: -30px;
}
#top::before,
#bottom::before {
content: '';
position: absolute;
right: 0;
height: 200%;
width: 200%;
border-radius: 100%;
box-shadow: 10px 10px 5px 100px blue;
z-index: -1;
}
#top::before {
top: -100%;
}
<div id="box">
<div id="top"></div>
#box
<div id="bottom"></div>
</div>
You can easily achieve this by using svg background images like in this snippet. Here the curves may not the way you want but surely you can change the path in the svg to your needs.
#box {
width: 200px;
height: 50px;
background-color: blue;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
position: relative;
margin: 30px;
}
#box::before,
#box::after {
content: "";
width: 20px;
height: 20px;
right: 0;
position: absolute;
}
#box::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 0 Q20 0 20 20 L20 0Z" /></svg>');
bottom: -20px;
}
#box::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path fill="blue" d="M0 20 Q20 20 20 0 L20 20Z" /></svg>');
top: -20px;
}
<div id="box"></div>
Can you use negative space? You could have a container with the same background color as your shape, then round the corners surrounding elements to create the illusion.
.container {
background-color: blue;
width: 100%;
}
.negat {
background-color: white;
height: 100px;
}
.posit-bg {
background-color: white;
}
.posit {
background-color: blue;
height: 100px;
border-radius: 50px 0px 0px 50px;
}
.top {
border-radius: 0px 0px 50px 0px;
}
.bot {
border-radius: 0px 50px 0px 0px;
}
<div class="container">
<div class="negat top"></div>
<div class="posit-bg">
<div class="posit"></div>
</div>
<div class="negat bot"></div>
</div>
#box{
width:200px;
height:50px;
background-color:blue;
color:#ffffff;
text-align:center;
padding-top:30px;
border-radius:9999px 0 0 9999px;
}
.sq{
width:25px;
height:25px;
background-color:blue;
}
#sq1,#sq2,#sq11,#sq22{
border-radius:-999px;
margin-left:175px;
}
.sq1{
background-color:#ffffff;
height:25px;
width:25px;
}
#sq11{
border-bottom-right-radius:9999px;
margin-bottom:-25px;
position: relative;
z-index:1;
}
#sq22{
border-top-right-radius:9999px;
margin-top:-25px;
position: relative;
z-index:1;
}
<div class="sq1" id="sq11"></div>
<div class="sq" id="sq1"></div>
<div id="box">#box</div>
<div class="sq" id="sq2"></div>
<div class="sq1" id="sq22"></div>
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 3 years ago.
Here's a CSS brainteaser for you. I want to create a border with just the corners around a text field, like the image below:
I thought about creating 2 rectangle divs, one with blue border and the other white and then overlaying them, but this didn't seem very elegant (e.g. it wouldn't work well if I wanted to vary the background).
Any ideas how else I might do this?
EDIT:
Here's the HTML:
<div class="blue white1 white">text</div>
.blue {
border: blue 4px solid;
etc..
}
Using one div, and one node for targeting. http://jsfiddle.net/eCEds/2/
HTML:
<div class="blue white1 white"><p>Text</p></div>
CSS:
.blue {position:relative;width:400px;height:300px;}
.blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:blue;
border-style:solid;
content: ' ';
}
.blue:before {top:0;left:0;border-width: 4px 0 0 4px}
.blue:after {top:0;right:0;border-width: 4px 4px 0 0}
.blue>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.blue>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}
.text
{
border: 1px solid #00f;
height: 200px;
position: relative;
width: 200px;
}
.text:after
{
position:absolute;
top: 10%;
height: 80%;
content: "";
width: 99%;
left: -3px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
.text:before
{
position:absolute;
left: 10%;
height: 99%;
content: " ";
width: 80%;
top: -3px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}
<div class="text">test test gfgfgf gfg f</div>
This is my variant.
Something like this is achievable with CSS gradients and multiple backgrounds: http://jsbin.com/usegup/1/edit. But probably SVG background will be more suitable for such cases.
Do you mean something like this: http://jsfiddle.net/FlameTrap/F5bC6/
HTML
<div class="text">
<span class="corner TL"></span>
<span class="corner TR"></span>
<span class="corner BL"></span>
<span class="corner BR"></span>
<div class="text">Text</div>
</div>
CSS
.text {
background: #fff;
width: 300px;
height: 200px;
position: relative;
z-index: 3;
}
.corner {
position: absolute;
background: blue;
width: 20px;
height: 20px;
z-index: 2;
}
.TL {
top: -10px;
left: -10px
}
.TR {
top: -10px;
right: -10px
}
.BL {
bottom: -10px;
left: -10px
}
.BR {
bottom: -10px;
right: -10px
}
Something like this would work and give you less issues in older browsers to boot:
<style>
.blue {
width: 500px;
height: 500px;
position: relative;
}
.corner {
position: absolute;
border-color: blue;
width: 30px;
height: 30px;
}
.tl {
top: 0;
left: 0;
border-top: 2px solid;
border-left: 2px solid;
}
.tr {
top: 0;
right: 0;
border-top: 2px solid;
border-right: 2px solid;
}
.br {
bottom: 0;
right: 0;
border-bottom: 2px solid;
border-right: 2px solid;
}
.bl {
bottom: 0;
left: 0;
border-bottom: 2px solid;
border-left: 2px solid;
}
</style>
<div class="blue">
<div class="tl corner"></div>
<div class="tr corner"></div>
<div class="bl corner"></div>
<div class="br corner"></div>
</div>
How would i create a div shape like this? I have read a lot of techniques but i could not figure this one out. Inside the div is text that should not be distorted.
Every technique is welcome it does not have to be pure css.
My HTML structure:
<div class="intro">
<div class="intro-header">
<h1>Headline WOW</h1>
</div>
<div class="intro-text">
<p>Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemasaa'ani sanelema sanelemasaa'ani sanelema </p>
</div>
</div>
you could use some skewed pseudo elements for this:
.first,
.last {
text-align: center;
line-height: 80px;
height: 80px;
background: green;
position: relative;
display: inline-block;
width: 400px;
margin-bottom: 20px;
}
.first:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom left;
background: inherit;
}
.last:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
transform: SkewY(2deg);
transform-origin: bottom right;
background: inherit;
}
<div class="first">FIRST LINE</div>
<div class="last">LAST LINE</div>
An alternative (possibly) would be to use a gradient (although this may lead to jagged edges). Solution credit to Harry
body {
background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
}
div {
height: 400px;
width: 400px;
background: -webkit-linear-gradient(75deg, lightseagreen 45%, transparent 45%, transparent 55%, lightseagreen 55%);
}
<div></div>
You can do this with border cut-offs.
As an example:
.top {
height: 300px;
background: red;
position: relative;
width: 300px
}
.top:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-bottom: 10px solid white;
border-right: 300px solid red;
width: 0;
}
.bottom {
height: 300px;
background: red;
position: relative;
width: 300px;
padding-top: 10px;
margin-top: 0px;
}
.bottom:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-top: 10px solid white;
border-left: 300px solid red;
width: 0;
}
<div class="top">Text</div>
<div class="bottom">Text</div>
This should do it.
html,body{
margin:0;
height:100%;
}
.intro{
width:400px;
display:inline-block;
background:red;
padding:50px;
}
.intro-header,.intro-text{
width:100%;
display:inline-block;
background:#ccc;
text-align:center;
position:relative;
}
.intro-header{
margin-bottom:50px;
}
.intro-header:after{
position:absolute;
left:0;
content:"";
width: 0;
height: 0;
border-left: 400px solid transparent;
border-top: 20px solid #ccc;
}
.intro-text:after{
position:absolute;
top:-20px;
left:0;
content:"";
width: 0;
height: 0;
border-right: 400px solid transparent;
border-bottom: 20px solid #ccc;
}
Example: CodePen
I'm trying to align the border to the circle, to make it look like clipped there.
Here is an example:
http://jsfiddle.net/Beck/P63VY/1/
<div class="circle">
</div>
<div class="rounded"></div>
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 22px;
top: 23px;
border: 1px solid red;
border-radius: 62px/66px 0px 0px 0px;
width: 200px;
height: 50px;
}
Is there a way to actually clip that top left corner?
Thanks.
try this
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 18px;
top: 15px;
border: 1px solid red;
border-radius:72.5px;
width: 145px;
height: 145px;
}
</style>
<div class="circle">
<div class="rounded"></div>
</div>
Fiddle
The way I did it is:
Place <div class="rounded"></div> inside the <div class="circle">
If you want to keep the position: absolute in .rounded, add position: relative to the parent .circle
Add overflow: hidden to the parent, so the child gets clipped.
Remove all border-radius from the child .rounded since it's no longer needed.
HTML
<div class="circle">
<div class="rounded"></div>
</div>
CSS
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
/* These were added: */
overflow:hidden;
position:relative;
}
.rounded {
position: absolute;
top: 10px;
border: 1px solid red;
width: 200px;
height: 50px;
}
Make the radius the same for both classes and make the height of .rounded to half the height of .circle. I also have changed the left and top values to align it.
HTML
<div class="circle"></div>
<div class="rounded"></div>
CSS
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 12px;
top: 12px;
border: 1px solid red;
border-radius: 82px 0px 0px 0px;
width: 200px;
height: 75px;
}
Here's the fiddle: http://jsfiddle.net/Xs2Mr/.
Hope this helps!
I think Kai did it correctly, but in case you don't want it to touch the top of the circle, here is the best I could do with your fixed height of the red box.
http://jsfiddle.net/P63VY/18/
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 20px;
top: 23px;
border: 1px solid red;
border-radius: 150px / 160px 0px 0px 0px;
width: 200px;
height: 50px;
}
try if any issue comment it
<style>
.circle {
border: 7px solid black;
border-radius: 82px 82px 82px 82px;
height: 150px;
margin-left: 1px;
width: 150px;
}
.rounded {
border: 1px solid red;
border-radius: 60px 0 0 0;
font-size: 30px;
height: 50px;
left: 20px;
line-height: 46px;
padding-left: 20px;
position: absolute;
top: 22px;
font-size:30px;
}
</style>
<div class="circle">
</div>
<div class="rounded">blah blah blah blah blah blah</div>
Got it working, but with a trick.
Here is the answer:
http://jsfiddle.net/Beck/P63VY/64/
Thanks for trying though ppl.
64 updates lol :D
<div id="rounded1" class="rounded"></div>
<div class="circle">
<div class="rounded"></div>
</div>
<div id="text">blah blah blah blah blah blah</div>
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
overflow:hidden;
}
.rounded {
position: relative;
top: 23px;
left:-3px;
background:red;
width: 400px;
height: 50px;
}
#rounded1 {
position:absolute;
top:38px;
left:40px;
background:red;
}
#text {
position:absolute;
top:38px;
line-height:50px;
padding-left:20px;
font-size:30px;
color:white;
}
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 3 years ago.
Here's a CSS brainteaser for you. I want to create a border with just the corners around a text field, like the image below:
I thought about creating 2 rectangle divs, one with blue border and the other white and then overlaying them, but this didn't seem very elegant (e.g. it wouldn't work well if I wanted to vary the background).
Any ideas how else I might do this?
EDIT:
Here's the HTML:
<div class="blue white1 white">text</div>
.blue {
border: blue 4px solid;
etc..
}
Using one div, and one node for targeting. http://jsfiddle.net/eCEds/2/
HTML:
<div class="blue white1 white"><p>Text</p></div>
CSS:
.blue {position:relative;width:400px;height:300px;}
.blue:before, .blue:after, .blue>:first-child:before, .blue>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:blue;
border-style:solid;
content: ' ';
}
.blue:before {top:0;left:0;border-width: 4px 0 0 4px}
.blue:after {top:0;right:0;border-width: 4px 4px 0 0}
.blue>:first-child:before {bottom:0;right:0;border-width: 0 4px 4px 0}
.blue>:first-child:after {bottom:0;left:0;border-width: 0 0 4px 4px}
.text
{
border: 1px solid #00f;
height: 200px;
position: relative;
width: 200px;
}
.text:after
{
position:absolute;
top: 10%;
height: 80%;
content: "";
width: 99%;
left: -3px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
.text:before
{
position:absolute;
left: 10%;
height: 99%;
content: " ";
width: 80%;
top: -3px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}
<div class="text">test test gfgfgf gfg f</div>
This is my variant.
Something like this is achievable with CSS gradients and multiple backgrounds: http://jsbin.com/usegup/1/edit. But probably SVG background will be more suitable for such cases.
Do you mean something like this: http://jsfiddle.net/FlameTrap/F5bC6/
HTML
<div class="text">
<span class="corner TL"></span>
<span class="corner TR"></span>
<span class="corner BL"></span>
<span class="corner BR"></span>
<div class="text">Text</div>
</div>
CSS
.text {
background: #fff;
width: 300px;
height: 200px;
position: relative;
z-index: 3;
}
.corner {
position: absolute;
background: blue;
width: 20px;
height: 20px;
z-index: 2;
}
.TL {
top: -10px;
left: -10px
}
.TR {
top: -10px;
right: -10px
}
.BL {
bottom: -10px;
left: -10px
}
.BR {
bottom: -10px;
right: -10px
}
Something like this would work and give you less issues in older browsers to boot:
<style>
.blue {
width: 500px;
height: 500px;
position: relative;
}
.corner {
position: absolute;
border-color: blue;
width: 30px;
height: 30px;
}
.tl {
top: 0;
left: 0;
border-top: 2px solid;
border-left: 2px solid;
}
.tr {
top: 0;
right: 0;
border-top: 2px solid;
border-right: 2px solid;
}
.br {
bottom: 0;
right: 0;
border-bottom: 2px solid;
border-right: 2px solid;
}
.bl {
bottom: 0;
left: 0;
border-bottom: 2px solid;
border-left: 2px solid;
}
</style>
<div class="blue">
<div class="tl corner"></div>
<div class="tr corner"></div>
<div class="bl corner"></div>
<div class="br corner"></div>
</div>