I suspect using line gradient?I know how to do the ellipse thing but I just don't understand how I can make the red line right through the middle?
I would make something like this: DEMO FIDDLE
CSS:
#container {
position: relative;
width: 200px;
background-color:black;
z-index:-2;
padding: 10px 0;
text-align:center;
}
#line {
position: absolute;
top: 50%;
width: 80%;
left:10%;
height: 1px;
box-shadow: 1px 1px 20px 5px red;
z-index:-1;
background-color: red;
}
#text{
color:white;
font-weight:bold;
text-transform:uppercase;
letter-spacing:8px;
text-shadow: 1px 1px 1px #ccc
}
HTML:
<div id="container">
<div id="text">Text</div>
<div id="line"></div>
</div>
Related
The above is an image of a project I'm working on. This is how far I got:
Creating the box was fairly simple; however, now I have NO IDEA how to create this cut corner on the bottom left. I've tried a bunch of things already and most things work if the background isn't transparent but a block of color. Since the background needs to be this image, I can't make the cut corner work without having one side show a certain color. This is my code:
<div class="profile">
// HTML content
</div>
<style>
profile {
border: 2px solid #fff;
color: #fff;
height: 100%;
padding: 10px;
width: 250px;
</style>
I've tried multiple things already, such as this here (not the exact code I used, but I followed this example):
.cut {
border: none;
position: relative;
}
.cut:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-bottom: 20px solid lightgrey;
border-left: 20px solid #e67e22;
width: 0;
}
This creates a cut corner, but with a block of a solid color and I need the image to be shown, not the color.
Does anyone have a clue how to do this? Suggestions are much appreciated. Thanks!
You may use before/after element to make the bottom part like this :
.profile {
position:relative;
display:inline-block;
margin:50px;
border:1px solid #000;
border-bottom:none;
width:100px;
height:200px;
background:#ccc;
}
.profile:after {
content:" ";
position:absolute;
border:1px solid #000;
height:20px;
width:80px;
bottom:-20px;
right:-1px;
border-top:0;
border-left:0;
background:#ccc;
}
.profile:before {
content:" ";
position:absolute;
border-bottom:1px solid #000;
height:29px;
width:29px;
transform:rotate(45deg);
bottom:-15px;
left:6px;
background:#ccc;
}
<div class="profile"></div>
the bottom is split into tow part : a rectangle with only two border + a square with one border rotated with 45°
Hope it helps
NB : Becarefull when changing the dimensions
.profile {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.profile h2 {
margin: 0 0 10px;
}
.profile p {
font-size: 14px;
}
.profile .bottom {
position: absolute;
bottom: -30px;
right: -2px;
width: 180px;
height: 30px;
border-bottom: 2px solid #000;
box-sizing: border-box;
border-right: 2px solid #000;
}
.profile .bottom::before {
content: '';
position: absolute;
left: -10px;
bottom: -4px;
width: 2px;
height: 35px;
background-color: #000;
transform: rotate(-35deg);
}
<div class="profile">
<h2>Name</h2>
<p>Description</p>
<div class="bottom"></div>
</div>
I think you're trying to cut the corner of an image instead of div, so you can do something like this:
body {
background: url('https://www.lunapic.com/editor/premade/o-paint-bucket.gif');
}
.container {
display: inline-block;
width: 200px;
height: 300px;
overflow: hidden;
}
.container .image_container {
width: 320px;
height: 550px;
overflow: hidden;
display: block;
position: relative;
transform: rotate(45deg);
margin-left: calc(260px - 360px);
margin-top: -40px;
}
.container .image_container .image {
transform: rotate(-45deg);
margin-top: 10px;
margin-left: -10px;
}
<div class="container">
<div class="image_container">
<div class="image">
<img src="https://www.w3schools.com/css/img_fjords.jpg" />
</div>
</div>
</div>
I created the following object with scooped borders ... http://jsfiddle.net/zjw3pg2e/
I want a way using pure CSS to give the object a black border. All my attempts at doing so have thus far failed.
HTML:
<div class="box"></div>
CSS:
.box {
position:relative;
height:200px;
width:200px;
overflow:hidden;
/*border: solid 2px black;*/
}
.box:before{
content:'';
position:absolute;
/*border: solid 2px black;*/
left:0;
margin:-20px;
height:40px;
width:40px;
border-radius:100%;
background:white;
box-shadow:200px 0 0 white,
0 200px 0 white,
200px 200px 0 white,
0 0 0 500px blue;
}
I tried setting the border for .box and .box:before as border: solid black 2px;, but this doesn't do what I am trying to achieve. I need the border to fit the shape of the object perfectly.
I suspect there's a way to do it by altering the box-shadow, but I can't figure it out. Any help is appreciated.
I did it with pure css in this example using 4 extra divs:
If youre worried about overflow you can just wrap it in an extra div.
JS FIDDLE
css:
.corner {
background:#fff;
height:20px;
width:20px;
position:absolute;
}
#sw {
left: -2px;
bottom: -2px;
border-radius: 0px 20px 0px 0px;
border-top: 2px solid #000;
border-right: 2px solid #000;
}
#se {
right: -2px;
bottom: -2px;
border-radius: 20px 0px 0px 0px;
border-top: 2px solid #000;
border-left: 2px solid #000;
}
#nw {
left: -2px;
top: -2px;
border-radius: 0px 0px 20px 0px;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
#ne {
right: -2px;
top: -2px;
border-radius: 0px 0px 0px 20px;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
}
.box {
position:relative;
height:200px;
width:200px;
border: solid 2px black;
background:blue;
border-radius: 5px -5px 5px 5px;
}
html:
<div class="box">
<div id="ne" class="corner"></div>
<div id="nw" class="corner"></div>
<div id="se" class="corner"></div>
<div id="sw" class="corner"></div>
</div>
So the solution I came up with... uses 3 divs (an outer-box, box, and inner-box).
The box:before/:after and box-inner:before/:after are the semi-circles. around the sides, that I gave a white background with a black border.
JS Fiddle
.box-wrapper{
position:relative;
height:202px;
width:202px;
overflow:hidden;
}
.box {
position: absolute;
height:200px;
width:200px;
background: blue;
border: 1px solid #000;
}
.box:before,
.box:after,
.box-inner:before,
.box-inner:after {
background: #fff;
content: ' ';
display: block;
height: 3em;
width: 3em;
border-radius: 50%;
border: solid 1px black;
position: absolute;
}
.box:before {
top: -1.5em;
left: -1.5em;
}
.box:after {
top: -1.5em;
right: -1.5em;
}
.box-inner:before {
bottom: -1.5em;
left: -1.5em;
}
.box-inner:after {
bottom: -1.5em;
right: -1.5em;
}
<div class="box-wrapper">
<div class="box">
<div class="box-inner"></div>
</div>
</div>
Normally you can apply a box-shadow: 0 0 1px #000;, which lets you give a border-like effect on top of borders, however the circles make the relative .box div will always sit on top of its :before/:after (making the box-shadow solution unobtainable).
I'm trying to make some kind of "triangular ornament" bar with html/css. Can you please tell me how to make such?
Here is the image :
Thanks in advance
I have made this by mixing two triangles and a rectangle see if this is what you want http://jsfiddle.net/xkwbt73v/5/
HTML
<div id="triangle-left"></div>
<div id="triangle-left-down"></div>
<div id="bar"></div>
CSS
#triangle-left {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-left-down {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
#bar{
width:1000px;
height:200px;
background-color:red;
position:absolute;
margin-left:100px;
margin-top:-200px;
}
If you want to do it using one element then have a look at Pseudo-elements - CSS | MDN
HTML:
<figure></figure>
DEMO 1 using Background-image
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before{
content: '';
position: absolute;
left: -60px;
width: 100px;
height: 100%;
background-image: linear-gradient(32deg, transparent 50%, blue 0%),linear-gradient(147deg, transparent 50%, blue 0%);
}
DEMO 2 using 2 elements
CSS:
figure{
width:320px;
height:64px;
background:blue;
position:relative;
margin:40px auto;
}
figure:before, figure:after{
content:'';
position:absolute;
display:block;
left: -40px;
width:0;
height:0;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
figure:before{
top: 0;
border-top: 32px solid blue;
}
figure:after{
bottom: 0;
border-bottom: 32px solid blue;
}
http://jsfiddle.net/5p4yLrz4/ :)
HTML:
<div class="wrapper">
<div class="triangle"></div>
</div>
CSS:
.wrapper{
width:300px;
background-color:orange;
}
.triangle {
width:0;
border-width: 30px;
border-right:0px;
border-color: transparent transparent transparent yellow;
border-style: solid;
}
Is this possible at all using just CSS? I need to create two slant edges with an outer border but seeming that I created the slant edges with a border I am completely lost.
This is how far I got.
JSFIDDLE does not seem to want to load today??? but will post it on there as soon as possible :).
Here's the CSS:
.wrap {width:29%;}
.slider-header:before {
content:'';
border-top:20px solid white;
border-right: 20px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:20px;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 20px;
}
.slider-header {
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
background:#000000;
position:relative;
font-size:1em;
padding-left:1.5em;
width:200px;
float:right;
}
.slider-header2:before {
content:'';
border-bottom:20px solid white;
border-left: 20px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:20px;
position: absolute;
top: 0;
right: 0;
height:100%;
width: 20px;
}
.slider-header2 {
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
background:#000000;
position:relative;
font-size:1em;
padding-left:1.5em;
width:200px;
float:left;
}
and the HTML:
<div class="wrap">
<div class="slider-header">
hey2
</div>
<div class="slider-header2">
hey
</div>
<div>
Hey everyone answers has been great especially Aequanox but i need this to work on IE8+ and if its IE7+ ill probably name my first born after you..
Here is achieved without adding any markup.
<div class="wrap">
<div class="slider-header">
hey1
</div>
<div class="slider-header2">
hey2
</div>
<div>
CSS is not optimized at all, just to achieve the deired effect.
.wrap{width:500px; padding:5px; display:block; overflow:hidden}
.wrap div{background:#333; color:#fff; width:235px; }
.wrap:after{
content:"";
display:block;
border-top:1px solid #333;
margin-top:-5px;
margin-left:265px;
width:235px;
}
.wrap:before{
content:"";
display:block;
border-bottom:1px solid #333;
position:absolute;
top:37px;
width:235px;
}
.slider-header{position:relative; float:left;}
.slider-header2{position:relative; float:right;}
.slider-header:before{
content:"";
display:block;
height:1px;
width:70px;
background:#333;
position:absolute;
left:225px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.slider-header:after{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
right:-20px;
border-right: 20px solid transparent;
border-top: 20px solid #333;
}
.slider-header2:before{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:-20px;
border-left: 20px solid transparent;
border-bottom: 20px solid #333;
}
And here's the fiddle : http://jsfiddle.net/dG7mD/
It is possible to draw the shapes:
http://techcruser.blogspot.com/2011/08/draw-various-shapes-using-css.html
I was able to get the shapes without writing in them:
html:
<table>
<tr>
<td class="triangle-topleft">
button1
</td>
<td class="triangle-bottomright">
button2
</td>
</tr>
</table>
css:
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
*/}
.triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
but honestly, I would use jquery to do my buttons or menus. It makes it easier in the long run.
What about using some simple hr's?
HTML:
<div id="elem"> <span>Text 1</span>
<span>Text 2</span>
<hr id="hr1" class="lines" />
<hr id="hr2" class="lines" />
<hr id="hr3" class="lines" />
</div>
CSS:
#elem {
height: 50px;
width: 320px;
background: black;
margin: 50px;
position: relative;
}
#elem > span {
box-sizing: border-box;
height: 100%;
width: 50%;
color: white;
display: block;
float: left;
padding: 0.2em 1.5em;
}
hr.lines {
height: 1px;
background-color: black;
color: black;
border: 3px solid white;
border-left: 0 none;
border-right: 0 none;
position: absolute;
margin: 0;
}
hr#hr1 {
-webkit-transform: rotate(-55deg);
-moz-transform: rotate(-55deg);
-o-transform: rotate(-55deg);
width: 70px;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -3px;
}
hr#hr2 {
width: -webkit-calc(50% - 25px);
bottom: -7px;
left: 0;
}
hr#hr3 {
width: -webkit-calc(50% - 15px);
top: -7px;
right: 0;
}
Fiddle!
I need some trick to insert border blank space by using CSS like this..
I using CSS box-shadow like this
box-shadow:
-1px 0px 0px 0px #000,
0px -1px 0px 0px #000,
0px 1px 0px 0px #000,
1px 1px 0px 0px #000
I have no idea how to make border / shadow look like the picture.
I will use only one html element.. <div></div>
Any trick ?
Playground : http://jsfiddle.net/ES66k/
with one div only: http://jsfiddle.net/ES66k/1/ (tested on Fx18 and chrome)
div {
width:300px;
height:170px;
margin:100px;
border-top: 1px black solid;
border-bottom: 1px black solid;
position: relative;
}
div:after, div:before {
content: "";
position: absolute;
top: -1px;
width: 20px;
height: 172px;
border-top: 40px white solid;
border-bottom: 40px white solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }
It's bit hacky, anyway, since it's relying on a fixed height and on a solid color as background (white) but maybe could be useful for your purpose.
You can create 4 <div>'s with classes .top-left, .top-right, .bottom-left and .bottom-right. Make them absolute and the container relative. Size them, make them the color of the containers bg-color and get them to the corners with top, right, bottom and left properties. Their value must be minus the border width.
Here is example of element with 3px border:
HTML:
<div class="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
CSS:
.box{
width: 300px;
height: 300px;
border: 3px solid #666;
position:relative;
}
.corner{
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
}
.top-left{
top: -3px;
left: -3px;
}
.top-right {
top: -3px;
right: -3px;
}
.bottom-left{
bottom: -3px;
left: -3px;
}
.bottom-right{
bottom: -3px;
right: -3px;
}
Try to use the CSS3 attribute border-image:
Here's a demo you can have a look and try out yourself: CSS3 border-image
div {
width:300px;
height:170px;
margin:100px;
position:relative;
background:#ccc;
}
div:before, div:after {
content:"";
position:absolute;
top:0;
left:0;
}
div:before {
width:280px; /*****-20px*****/
height:168px; /*****-2px*****/
margin-left:10px;
border-top:1px solid #f00;
border-bottom:1px solid #f00;
}
div:after {
width:298px; /*****-2px*****/
height:150px; /*****-20px*****/
margin-top:10px;
border-left:1px solid #f00;
border-right:1px solid #f00;
}
Demo : http://jsfiddle.net/ES66k/4/
Done now, Don't need to set background-color :D
But thanks #Fabrizio Calderan anyway :D