Please take a look here:
http://jsfiddle.net/ztu267zp/1/
border:3px solid grey;
border-bottom: 8px solid red;
At the bottom corners you can see, that both the grey and the red borders intersect diagonally.
Can I cut the grey border to end at the bottom of the DIV and the red border having 100% width over the full distance?
Thank you very much,
Doing it right now with box-shadows, but also here, there is no clean edge in Chrome and FF:
http://imgur.com/mf7ABEO
Thanks
matt
its not possible but you can use something like this
<div id="bord">
<div class="line-cover">
</div>
css
#bord{
height:200px;
width:200px;
border:3px solid grey;
border-bottom: 8px solid white;
}
.line-cover{
position: relative;
border-bottom: 8px solid red;
width: 100%;
top: 200px;
padding: 0 3px;
left: -3px;
}
Fiddle here
What about st. like that, using pseudoelement after?
#bord{
height:200px;
width:200px;
border:3px solid grey;
border-bottom: 0;
/*border-bottom: 8px solid red;*/
position: relative;
}
#bord:after {
display: block;
background: red;
height: 8px;
width: 100%;
content: '';
position: absolute;
bottom: -8px;
left: 0;
margin: 0 -3px;
padding: 0 3px;
}
http://jsfiddle.net/ztu267zp/4/
Related
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
}
<div class="myButton">
Submit
</div>
The above is my code. As you can see I want to design a shape like the image below but I want the word Submit to be in the center but it is pushed down.
Anyone know a solution?
You can use linear-gradient background for this. Techique is based on setting fixed height and then applying padding equals height multiplied by √2:
.my-button {
border: 0;
height: 40px;
background: linear-gradient(45deg, transparent 40px, pink 40px);
padding-left: 56.5691px; /* 40 × √2 ≈ 56.5691 */
}
<button class="my-button">Submit</button>
Also you can achieve this via absolutely position pseudoelement:
.my-button {
background-color: pink;
position: relative;
height: 40px;
margin-left: 40px;
border: 0;
}
.my-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
/* Move pseudoelement to the left to 100% of its width */
transform: translateX(-100%);
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
}
<button class="my-button">Submit</button>
The issue with what you have is that you're using a top border instead of a background so your text naturally won't look to be in the center of your shape. What you can do is use positioning to manually move your text up within the shape:
.myButton {
float: right;
border-top: 40px solid pink;
border-left: 40px solid transparent;
border-right: 0px solid transparent;
width: 25%;
position: relative;
}
.inner {
position: absolute;
top: -30px;
left: 40px;
}
<div class="myButton">
<div class="inner">Submit</div>
</div>
I am trying to make a top-left triangle (red) with a (black) border. I want it to have the black border all the way around. This attempt angles a square to fake it (pushed outside the screen to mimmick a triangle)
I want the border all the way around, in which my attempt won't work
#corner {
height: 75px;
width: 100px;
position: absolute;
left: -3em; top: -2em;
z-index: 999;
transform: rotateZ(-45deg);
background-color: red;
border-bottom: 5px solid #0c0c0c;
}
<div id="corner"></div>
There is an easier way to create triangles, you can just use an element with a width / height of 0.
And for the border you want, the idea is to have two overlapping triangles in two different colors and different sizes, maybe take a look at the following snippet:
.triangle-up-left-1 {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 85, 85);
border-right: 50px solid transparent;
z-index:2;
position:absolute;
top:5px;
left:13px;
}
.triangle-up-left-2 {
width: 0;
height: 0;
position:absolute;
top:0;
border-top: 68px solid rgb(0, 0, 0);
border-right: 68px solid transparent;
z-index:1:
}
<div class="triangle-up-left-1"></div>
<div class="triangle-up-left-2"></div>
You can made triangle also like this: https://css-tricks.com/examples/ShapesOfCSS/
I tried to combine two of them and with margin to position it, so it would look as one with a border. Perhaps this is a possible solution for you. Cheers.
.triangle1 {
width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid transparent;
}
.triangle2 {
width: 0;
height: 0;
border-top: 82px solid red;
border-right: 82px solid transparent;
position: absolute;
margin-top: -95px;
margin-left: 5px;
}
<div class="triangle1">
<div class="triangle2"></div>
</div>
Just getting into css and, though trying different approaches, I don't manage to design a content box with the borders I have in mind. It should look something like this:
In words: The borders should cross each other and continue for some maybe 30px, maybe we can call it overflow. Resulting in crosses at all four edges.
I have tried to design small cubic boxes each at every edge, and it kinda works. But I find it very hard to include them in my concept of responsiveness, as they don't shrink at the same rate that the actual box (lets call it <box>) does. The <box> has side margins in percent, so when the page is being scaled down, the small boxes <sbox> are in my way and preventing the margins of <box> from reaching out all the way to the frames borders.
Any ideas on how to make that one more elegant?
You can do this using the help of before and after pseudo classes.
* { box-sizing:border-box; }
.box { padding:20px; width:100px; height:100px; position:relative; border-left:2px solid #000; border-right:2px solid #000; }
.box::after { position:absolute; top:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
.box::before { position:absolute; bottom:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
<div class="box">
Content
</div>
Demo
An example without pseudo classes
.outer{
height: 1em;
margin: 0 1em 0 1em;
}
.content{
border: 1px solid #000;
border-left: none;
border-right: none;
}
.innerContent{
margin: 0 1em 0 1em;
}
.borderLeftRight{
border-left: 1px solid #000;
border-right: 1px solid #000;
}
<div class="outer borderLeftRight"></div>
<div class="content">
<div class="innerContent borderLeftRight">
Content
</div>
</div>
<div class="outer borderLeftRight"></div>
Somebody already did something similar. I think the most elegant way is with pseudo selectors :before & :after. I feel you should do it in this way and not with wrappers. Most important things are setting your element's position to relative and then before and after selectors position to absolute. Then fiddle with border and top, bottom, left, right properties.
.box {
display: inline-block;
position: relative;
padding: 2em;
}
.box:after,
.box:before {
position: absolute;
content: "";
}
.box:after {
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
left: 0;
right: 0;
top: 1em;
bottom: 1em;
}
.box:before {
border-left: 1px solid #f00;
border-right: 1px solid #f00;
left: 1em;
right: 1em;
top: 0;
bottom: 0;
}
<div class="box">
text inside
</div>
Just going to put this up here to show you can do this using a single pseudo element.
Fixed width
You will have to set the width and height for it, can get around this using calc but its support isn't amazing yet.
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
border-top: 1px solid;
border-bottom: 1px solid;
margin: 100px;
position: relative;
padding: 10px 25px;
}
div:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 20px;
width: 260px;
height: 240px;
border-left: 1px solid;
border-right: 1px solid;
}
<div>Testing</div>
Auto width
Example using calc, this will work with any size of text.
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
border-top: 1px solid;
border-bottom: 1px solid;
margin: 100px;
position: relative;
padding: 10px 25px;
}
div:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% + 40px);
border-left: 1px solid;
border-right: 1px solid;
}
<div>Hello</div>
I have the following div which aligns to the left side of the screen
css
#nav {
position: fixed;
height: 50px; width: 50px;
display: block;
background-color: #000;
}
This div contains an icon acting as a link
html
<div id="nav">icon</div>
I want the div to be a triangle (pointing towards the right) and not a square
I find this site useful: https://css-tricks.com/examples/ShapesOfCSS/
Right-facing triangle:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
You can adjust the border properties to change the width, height, and color of the triangle.
Something like this is probably what you're looking for: https://jsfiddle.net/kh2xsoh2/1
HTML
<div id="nav"><span>icon</span></div>
CSS
#nav {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #000;
border-bottom: 25px solid transparent;
position: fixed;
}
#nav span {
position: absolute;
line-height: 0;
left: -45px;
color: white;
}
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