I'm trying to divide a border with a background image. I don't know if this is even possible this way. Hopefully somebody can help me figure out a good clean way to achieve this.
I'm trying to get the bottom one and that top one is what I have right now.
.tinybanner h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
border-bottom: 1px solid $green;
display: inline-block;
#include adjust-font-size-to(24px);
background: url('images/tinybanner.png') center bottom no-repeat;
}
By using the pseudo-selector :after, you can add an element after every h1:
h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
border-bottom: 1px solid green;
display: inline-block;
position: relative;
}
h1:after {
position: absolute;
left: 50%; /* center the element */
margin-left: -15px; /* shift left by (width+border)/2 */
display: block;
content: '';
width: 20px;
height: 20px;
background: green; /* this can of course be a background image, too */
border: 10px solid white; /* adds a gap to the left and right */
}
The reason why I like this approach is because it degrades nicely. If your browser doesn't support the :after pseudo-selector, you are still left with the border underneath the header (because it is set on the h1, not the pseudo element) and don't see a dangling background image (because it is set on the h1:after).
http://jsfiddle.net/stevemchey/YFXGa/
How about using an :after sudo-element with left and right borders:
.tinybanner h1 {
padding-bottom: 0.5em;
margin-bottom: 50px;
display: inline-block;
#include adjust-font-size-to(24px);
background: url('http://placekitten.com/10/20') center bottom no-repeat;
}
.tinybanner h1:after {
height:1px;
content:'';
display:block;
border-left: 40px solid #00ff00;
border-right:40px solid #00ff00;
}
http://jsfiddle.net/bhlaird/XSdbs/
Related
How could I make the effect of below picture with HTML, CSS using the the bootstrap framework?
I need two adjacent divs with trapezoid shape (or separated by a diagonal line). Both need to have a border.
You can do this by drawing a shape in CSS.
You can draw such a triangle in CSS by playing with different borders (top, right, bottom left) of an element that has zero width.
Example: https://css-tricks.com/snippets/css/css-triangle/
In the example below I use the pseudo element :after for this effect:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
padding-left: 10px;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
/* The triangle will be position:absolute, so it requires a `position:relative` parent */
position: relative;
/* We are drawing a full rectangle later, so we hide the rest of it */
overflow: hidden;
}
.container div:last-child {
background: #ff6666;
}
.container div:first-child:after {
position: absolute;
display: block;
content: ' ';
padding: inherit;
box-sizing: border-box;
/* Change below units (you can use px not just em)
to make the line become at different angles */
border-top: 1.3em solid transparent;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid #ff6666;
right: 0;
top: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
Update
But as you indicated in the comment, you wanted a different answer that uses div2 for the triangle, so here you are:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
}
.container div:last-child {
background: #ff6666;
position: relative;
padding-left: 1.3em;
}
.container div:last-child:before {
position: absolute;
content: '';.
width: 0;
height: 0;
box-sizing: border-box;
/* Change below units (you can use px not just em)
to make the line become at different angles */
border-top: 1.3em solid #66ff66;
border-bottom: 1.3em solid transparent;
border-right: 1.3em solid transparent;
top: 0;
left: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
Update 2
The picture you showed in comments also included real borders. This requires changing the approach. The new approach still uses :before, but adds border to it, and rotates it 45 degrees.
The idea is based on an example from: https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/
To imagine it:
Here's the code:
/* Apply styles to both DIVs */
.container > div {
width: 50%;
float:left;
font-weight: bold;
/* include padding in the height/width */
box-sizing: border-box;
margin: 0;
}
.container {
/* One way to make the DIV height extend to full heihgt of `float:left` DIVs inside it. Not the only way */
clear: both;
}
.container div:first-child {
background: #66ff66;
padding-left: 10px;
border: 1px solid;
border-right: none;
}
/*
The following assumes diemnsions 1.3em * 1.3em
Your real case can change the number
*/
.container div:last-child {
background: #ff6666;
position: relative;
border: 1px solid;
border-left: none;
padding-left: calc(1.5 * 1.3em);
overflow: hidden;
}
.container div:last-child:before {
position: absolute;
content: '';
width: calc(2 * 1.3em);
height: calc(2 * 1.3em);
box-sizing: border-box;
background: #66ff66;
border: 1px solid ;
transform:rotate(45deg);
margin-top: -1.3em;
margin-left: -1.3em;
left: 0;
top: 0;
}
<div class="container">
<div>div١</div>
<div>div٢</div>
</div>
just use border-right like following code snippet and see result :
.parent{
width: 100%;
display: flex;
background-color: #01579b;
}
.div1 {
width: 30%;
border-bottom: 100px solid #000;
border-right: 50px solid transparent;
}
.div2 {
width: 70%;
height: 100px;
}
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
</div>
I'm trying to create a div that has a left and top border with text in top line. what I am trying to achieve is the following...
html half box
I am able to get the top with the text using the following css or alternately a table but can't get it with the left border also. any 'outside the box' thinkers?
.hr-sect {
display: flex;
align-items: center;
color: blue;
margin: 8px 0px;
}
.hr-sect::before
{
content: "";
width: 20px;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
.hr-sect::after {
content: "";
width:100%;
background: #000;
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
CATEGORY
CATEGORY
You can simulate that interrupted border line by using an absolutely placed div that has a non-transparent background, just make sure it matches the actual background color.
.half-box {
border-left: 1px solid black;
border-top: 1px solid black;
position: relative;
padding: 30px;
}
.half-box > .title {
background-color: white;
padding: 0 10px;
position: absolute;
top: 0;
left: 30px;
font-size: 20px;
transform: translateY(-50%);
}
<div style="height: 100px">
</div>
<div class="half-box">
some content
<div class="title">
CONTENT
</div>
</div>
Set a positioning context on the outer box with position: relative;
For the border, use a pseudo ::before element with content: " "; and give it a position: absolute; to take it out of the flow. Give it a top and left border.
For the heading, also use position: absolute; and move it up with top: -20px or whatever. Set the same background color as the outer box to mask the border.
Adjust your margins and paddings as needed.
See this codepen: https://codepen.io/matthewsmith_io/pen/RVYQqy
I'm trying to create some CSS to have a icon or image in the center with a line on both sides, but it seems like i'm doing something wrong and need some help.
For simplicity I just use a star character in the code.
<div class='line-container'><div class='line-icon'>*</div></div>
.line-icon {
text-align: center;
}
.line-icon::before {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}
.line-icon::after {
width: 25%;
height: 1px;
border: 1px solid #ccc;
}
Try adding a content to your ::after and ::before, and setting its display:
.line-icon {
text-align: center;
}
/* Joined both selectors, since were pretty much the same */
.line-icon::before,
.line-icon::after {
/* Styles kept */
width: 25%;
height: 1px;
/* Changed to border-top (instead of border) to simulate a line better */
border-top: 1px solid #ccc;
/* Styles added */
display: inline-block;
content: '';
/* Use padding to vertical align the line */
/* Use padding in em for a responsive icon height */
padding-top: 0.5em;
/* Use margins to give the lines some spacement around the icon */
/* Use margins in % for a responsive spacement */
margin-left: 5%;
margin-right: 5%;
}
<div class='line-container'><div class='line-icon'>*</div></div>
A different style but may be usefull for u
.seperator {
padding: 0;
border: 0px;
border-top: 1px solid #ccc;
color: #000;
text-align: center;
}
.seperator:after {
content: "vs";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.50em;
background: #fff;
}
<hr class="seperator"></hr>
I'm trying to mockup this design:
But, I can't render the red border correctly. I tried with the obvious solution:
border: 1px solid #939393;
border-left: 4px solid red;
But It's affected by the top and bottom borders, leaving the red stripe with diagonal corners, as you can see in this fiddle:
http://jsfiddle.net/anp0e03k/
Is there any way correct way to fix this?
The only thing that I can think is to add a div inside with red background and negative margins on top and bottom, but it seems to be an overkill and would love to find something that doesn't ruins the html semantic.
Apply the left border to a :before pseudo element of the div and remove the divs left border.
Compatibility: All modern browsers and IE8 +
Give the :before
height: 100% to span the entire height of your div
margin-top: -1px to overlap the top border
padding-bottom: 2px to overlap the bottom border
Then use either
position: absolute on the :before with position: relative on the div like this example:
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
position: relative;
}
div:before {
content: '';
display: block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
position: absolute;
top: 0;
left: 0;
}
<div>
</div>
or
display: inline-block for the :before like this example:
Note: You will probably want to use vertical-align: top / middle / bottom for the :before. This example uses the value top.
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
}
div:before {
content: '';
display: inline-block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
vertical-align: top;
}
<div>
There is text in this
</div>
Final result
I am trying to create the appearance of a text chat using pure CSS. The kind of text chat where one person's texts are represented by speech bubbles on the left of the screen, and the other persons are speech bubbles on the right side of the screen.
I'm almost there, and I've created a JSFiddle example. There are two problems.
The big problem is that the bubbles with the pointer on the right side, representing the person on the right, needs to be aligned on the right side. But I can't find a way to get them to align without floating them, and if I float them, then they overlap with other bubbles and create a mess.
How do I get the class bubble-right to stick to the right side?
The second issue is that I'm using display: inline-block; which makes it so that the bubbles are only as wide as the text. I had to put white-space: pre-line; in the containing DIV in order to get the bubbles to stack properly. Unfortunately, this is creating extra space. I tried putting in line-height declarations to prevent this, but it doesn't seem to have helped.
How do I get the bubbles to stack and alternate vertically without making extra whitespace I don't need?
Here is the CSS:
.bubble-dialog {
white-space: pre-line;
line-height:0;
}
.bubble-left,
.bubble-right {
line-height: 100%;
display: inline-block;
position: relative;
padding: .25em .5em;
background: pink;
border: red solid 3px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
margin-bottom: 2em;
}
.bubble-left {
margin-right:10%;
}
.bubble-right {
margin-left:10%
}
.bubble-left:after,
.bubble-left:before,
.bubble-right:after,
.bubble-right:before {
content: "";
position: absolute;
top: 21px;
border-style: solid;
border-width: 13px 17px 13px 0;
border-color: transparent pink;
display: block;
width: 0;
}
.bubble-left:after,
.bubble-left:before {
border-width: 13px 17px 13px 0;
border-color: transparent pink;
}
.bubble-right:after,
.bubble-right:before {
border-width: 13px 0 13px 17px;
border-color: transparent pink;
}
.bubble-left:after {
left: -16px;
border-color: transparent pink;
z-index: 1;
}
.bubble-left:before {
left: -19px;
border-color: transparent red;
z-index: 0;
}
.bubble-right:after {
right:-16px;
border-color: transparent pink;
z-index: 1;
}
.bubble-right:before {
right:-19px;
border-color: transparent red;
z-index: 0;
}
I don't understand your second problem very well, but as for first problem you can add this css to your left and right classes:
I add clear:both and display:block and add float as you said, and right bubbles will stick at right side; here is a fiddle:
.bubble-left,
.bubble-right {
line-height: 100%;
display: block;
position: relative;
padding: .25em .5em;
background: pink;
border: red solid 3px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
margin-bottom: 2em;
clear: both;
max-width:50%;
}
.bubble-left {
float: left;
margin-right:10%;
}
.bubble-right {
float:right;
margin-left:10%
}
And as for your second problem, I don't know why the spaces are there, but with removing bottom margin of the <p> tag it gets OK so I add margin-bottom:0 to <p> tag;