I have element with 3 borders: left (4px), top (1px) and bottom (1px):
But border-left looks like this:
how to set border-left outside of the box, to make render without cutting of edges?
This is Example of my code:
HTML:
<a class="element">Some Text</a>
CSS:
.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 4px solid red;
}
Solved problem using :before pseudo element in CSS:
.element {
display: block;
width: 200px;
height: 40px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
position: relative; /* Make sure you have this */
padding-left: 8px; /* Nudge the text by few pixels in the box */
}
.element:before {
content: "";
background-color: red;
display: block;
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
This should solve the problem:
-webkit-background-clip:padding;
-moz-background-clip:padding;
background-clip:padding-box;
Look at the simple example :
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>
this may help you.
Add padding to the left side.
.element {
padding-left:4px;
}
DEMO here.
Related
I'm trying to place these two divs inline.
HTML
<div class="thisFlak">
</div>
<div class="thisFlakNotes">
</div>
CSS
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
}
I cannot mess with ".thisFlak" to much because it hold alot of other stuff.
FIDDLE
https://jsfiddle.net/xwzcbn6w/
DEMO
CSS
.thisFlak {
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
/* to make it inline */
display: inline-block;
/* aligning vertically you can make it top / bottom / baseline */
vertical-align: middle
}
.thisFlakNotes {
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
/* to make it inline */
display: inline-block;
/* aligning vertically you can make it top / bottom / baseline */
vertical-align: middle
}
By Adding float:left / display:inline to both classes you can achieve it.
Here is the updated fiddle linkUpdated fiddle
display:inline-block; will allow you to keep the dimensions and put your divs on the same line. It will treat the divs like words in a sentence though so you will need to comment out any space between them and as they are different heights, you will need to add vertical alignment:
.thisFlak{
vertical-align:top;
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
display:inline-block;
}
.thisFlakNotes{
vertical-align:top;
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
display:inline-block;
}
<div class="thisFlak">
</div><!-- comment out this space
--><div class="thisFlakNotes">
</div>
Update
Also if you don't want the boxes to wrap when the page is too small for them to fit on one line, you will need to add white-space:nowrap to the parent (or make sure the width of the parent is wider than the two children)
What you're looking for is:
display: inline-block;
Your code:
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
display: inline-block;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
display: inline-block;
}
float...
https://jsfiddle.net/maky/xwzcbn6w/2/
.thisFlak {
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
float: left;
}
.thisFlakNotes {
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
float: left;
}
just put display : inline-block or float : left to each div
.thisFlak{
width: 603px;
height: 253px;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 30px;
float : left;
display : inline-block;
}
.thisFlakNotes{
width: 100px;
height: 200px;
border: 1px solid black;
background: white;
float : left;
display : inline-block;
}
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'm trying to make something like this:
Where both sides of the button are clickable and link to a different website (have a guess which ones, heh).
https://jsfiddle.net/3HG6d/1836/
The issue I'm having (as can be seen in the jsfiddle) is that the top <a> tag always overlaps the second one, making only one clickable.
CSS:
a {
float:left;
margin:0.5%;
position:absolute;
display:inline-block;
}
/*Up-right pointing*/
.triangle-up-right {
width: 0;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-up-right:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-top: 500px solid #4679BD;
}
/*Down-left pointing*/
.triangle-down-left {
width: 10%;
height: 0;
padding-bottom: 10%;
overflow: hidden;
}
.triangle-down-left:after {
content: "";
display: block;
width: 0;
height: 0;
border-right: 500px solid transparent;
border-bottom: 500px solid #4679BD;
}
EDIT: should show the correct jsfiddle now
You will need to use a rotated square div for each one and match the angle that way. On top of this, you'll need to make sure that they are within a wrapper so that you can hide the overflow so that only the visible portion is clickable.
This thread could be of use.
use the map and area tag.
http://www.w3schools.com/tags/tag_area.asp
use poly and form a rectangle
This works for me:
.social-button {
width: 80px;
height: 80px;
display: block;
margin: 20px;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.social-button a {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
.twitter {
border-top: 0px solid transparent;
border-bottom: 80px solid transparent;
border-right: 80px solid #4679BD;
}
.facebook {
border-top: 80px solid transparent;
border-bottom: 0px solid transparent;
border-left: 80px solid #BD79BD;
}
<div class="social-button">
</div>
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/
Ok so, I'm trying to replicate the effect you see here at the bottom of the page, with the back to top button: http://www.ppp-templates.de/tilability/ - After the content area for We stay connected.
basically he's using a background image for that and I'd like to replicate it with CSS and keep the same effect.
I know how to create triangles with CSS with borders, but in my case I'd like to use the transparent bg image and not a color so I can't use borders
I removed the background image and used #FFF on the whole div, so it's all white now... I created a new div in which I added the back to top button and added background: transparent to it so it's transparent, but how do I create the triangle via CSS?
Any help is greatly appreciated.
The Fiddle:
http://jsfiddle.net/JaMH9/2/
The HTML:
<div class="bar">
<span class="home">^<br>Home, sweet home!</span>
</div>
The CSS:
.bar {
position: relative;
width: 90%;
height: 30px;
margin: 0 auto;
}
.home {
position: absolute;
top: 0px;
left: 60%;
width: 20%;
text-align: center;
}
.bar:before, .bar:after {
content:'';
position: absolute;
top: 0;
height: 0;
border-top: 30px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.bar:before {
left: 0;
width: 70%;
border-right: 30px solid transparent;
}
.bar:after {
right:0;
width: 30%;
border-left: 30px solid transparent;
}
Here's one way to make a triangle with fairly minimal markup and css:
HTML:
<div class="triangle"></div>
CSS:
.triangle {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid gray;
}
http://jsbin.com/iribib/21
Here you go, http://jsfiddle.net/pkUx7/1/
HTML
<body>
<div id = "footer"></div>
<div id = "bottom-line-left"></div>
<div id = "triangle"></div>
<div id = "bottom-line-right"></div>
</body>
CSS
body {
background-color: purple;
}
div {
margin:0;
padding:0;
background-color: violet;
}
#footer {
height: 100px;
}
#bottom-line-left, #bottom-line-right {
display: inline-block;
height: 20px;
}
#bottom-line-left {
width: 61%;
}
#bottom-line-right {
float: right;
width: 37%;
}
#triangle {
margin-left:-6px;
margin-right: -4px;
padding:0;
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid purple;
}
I just threw this together, there's probably a better way to achieve this effect.
HTML
<div class="div1">Lorem Ipsum</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
CSS
body {
background-color: gray;
border: 20px solid gray;
}
.div1 {
background-color: white;
border: 20px solid white;
}
.div2 {
float: right;
border-top: 20px solid white;
border-right: 20px solid white;
border-left: 20px solid transparent;
}
.div3 {
float: right;
margin: 10px -20px;
border-bottom: 20px solid white;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.div4 {
border-top: 20px solid white;
border-right: 20px solid transparent;
margin-right: 40px;
}
See it here.
You can use vector path.
For instance, transparent triangle with green border:
<svg height="151" width="150">
<path d="m0 150 h150 l -75 -150 z" fill="transparent" stroke="green" />
</svg>
See it here.