Adjacent divs with angled borders?
Try this
.left, .right {
position: relative;
height: 100px;
width: 200px;
background: #000;
float: left;
}
.left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 100px solid #000;
border-bottom: 50px solid transparent;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
position: absolute;
top: 0;
right: -50px;
}
.right {
margin-left: 60px;
width: 100px;
}
.right:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 100px solid #000;
border-left: 50px solid transparent;
border-right: 0px solid #000;
position: absolute;
top: -50px;
left: -50px;
}<div class="left"> </div>
<div class="right"> </div>how to achieve double borders with adjacent divs that have angled border decorations
You need to remove the existing borders, instead you can use transform: skewX(2deg); and add the black borders around it, use margin-top to cover up the top and bottom border.
Example:
.container {
width: 1020px;
}
.clear{clear:both; font-size:0px;line-height:0px; display:block;}
.categorycta {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
background-color: #ffffff;
}
.bandtop {
content: '';
height: 10px;
background-color: #ffffff;
display: block;
border-top: 2px solid #000;
}
.bandbot {
content: '';
height: 10px;
background-color: #ffffff;
display: block;
border-bottom: 2px solid #000;
}
.categorycta .col {
position: relative;
height: 216px;
width: 340px;
float: left;
background-size: cover;
}
.categorycta .col.left:after {
content: '';
line-height: 0;
font-size: 0;
width: 10px;
height: 102%;
/* border-bottom: 20px solid transparent; */
/* border-top: 216px solid #fff; */
/* border-left: 10px solid transparent; */
/* border-right: 0 solid #fff; */
background: white;
transform: skewX(2deg);
border-left: 2px solid black;
border-right: 2px solid black;
margin-top: -2px;
z-index: 1;
position: absolute;
top: 0;
right: -10px;
}
.categorycta .col.mid:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 216px solid #fff;
border-top: 20px solid transparent;
border-left: 0px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: -20px;
left: 0;
}
.categorycta .col.mid:after {
content: '';
line-height: 0;
font-size: 0;
width: 10px;
height: 102%;
position: absolute;
top: 0;
right: -9px;
background: white;
transform: skewX(-3deg);
border-left: 2px solid black;
border-right: 2px solid black;
margin-top: -2px;
z-index: 1;
}
.categorycta .col.right:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 216px solid #fff;
border-bottom: 20px solid transparent;
border-left: 0px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: 0;
left: 0;
}<div class="container">
<div class="bandtop"></div>
<div class="categorycta">
<div class="col left" style="background-image: url('http://lorempixel.com/340/220/');">
</div>
<div class="col mid" style="background-image: url('http://lorempixel.com/340/222/">
</div>
<div class="col right" style="background-image: url('http://lorempixel.com/340/225/">
</div>
<div class="clear"></div>
</div>
<div class="bandbot"></div>
</div>Div with slanted border using CSS3?
You could technically embed your image in a rotated (see CSS3’s transform: rotate(<X>deg)) <div/>, and then rotate the embeded image with a reverse angle.
Alternatively, you could use SVG (with <clipPath>) to achieve this effect. Plus SVG embedded in <object/> tags can use JavaScript, so the responsive part can be part of the ride.
Both JSFiddle are on their way.
EDIT1: CSS Version: http://jsfiddle.net/kU3tu/
EDIT2: SVG Version: http://jsfiddle.net/b2JJK/
make three adjacent slanted divs
You can also use display:flex. So you can set any width you want for the left and the right without worring about width of the center.
And I think it's more modern to use flex than float.
/* build the rectangles */
container
{
display:flex;
}
.rr-left,
.rr-right {
position: relative;
height: 200px;
background: #2c3e50;
}
.rr-left {
z-index: 8;
width: 33%;
}
.rr-right {
z-index: 11;
width: 33%;
}
.rr-mid
{
flex:1;
background-color:green;
position:relative;
z-index:10;
}
.rr-mid:before
{
left: -100px;
border-right: 100px solid green;
border-top: 200px solid rgba(0, 0, 0, 0);
}
/* slanted edges using pseudo-elements */
.rr-left:after,
.rr-right:before,
.rr-mid:before{
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
}
.rr-left:after {
right: 0;
border-left: 100px solid #2c3e50;
/* razorblade color */
border-bottom: 200px solid #FFFFFF;
/* page background color */
}
.rr-right:before {
left: -100px;
border-right: 100px solid #2c3e50;
/* razorblade color */
border-top: 200px solid rgba(0, 0, 0, 0);
/* transparent */
}
/* hover styles */
.rr-left:hover,
.rr-right:hover {
background: #34495e;
}
.rr-left:hover:after {
border-left-color: #34495e;
}
.rr-right:hover:before {
border-right-color: #34495e;
}
/* text positioning & styles */
.rr-text {
margin-top: 5%;
margin-left: 10%;
width: 80%;
text-align: left;
font-family: Arial;
color: #FFFFFF;
}
.rr-text h3 {
font-weight: bold;
font-size: 30px;
text-transform: uppercase;
}
.rr-text p {
font-size: 13px;
}<container>
<div class="rr-left">
<div class="rr-text">
<h3>rr-left div</h3>
</div>
</div>
<div class="rr-mid">
<div class="rr-text">
<h3>rr-mid</h3>
</div>
</div>
<div class="rr-right">
<div class="rr-text">
<h3>rr-right div</h3>
</div>
</div>
</container>Creating an angled CSS3 divider - 100% / Auto height
Something like this?
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.c-1 {
background: #333;
overflow: hidden;
position: relative;
}
.c-2 {
float: left;
width: 50%;
position: relative;
color: #fff;
padding: 50px;
}
.bg-image {
position: absolute;
width: 50%;
top: 0;
right: 0;
bottom: 0;
padding: 0;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
section {
position: relative;
color: #fff;
}
.diagonal {
position: relative;
z-index:1;
}
.diagonal:after {
right: 0;
left: 100px;
position: absolute;
-webkit-transform: skewX(-15deg) rotate(180deg);
-ms-transform: skewX(-15deg) rotate(180deg);
transform: skewX(-15deg) rotate(180deg);
content: "";
top: 0;
width: 100%;
height: 100%;
background: #333;
z-index:-1;
}<section class="c-1">
<div class="c-2 diagonal">
<h1>
Work with us
</h1>
<p>
Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere. A cubilia varius dapibus non
scelerisque aliquam imperdiet nec montes suspendisse orci potenti dignissim vestibulum venenatis sociosqu ullamcorper vestibulum scelerisque magna sem ultricies convallis cras. Ante sed elit tristique interdum hendrerit nascetur a cras suspendisse
mi fermentum vestibulum auctor a taciti euismod ac non adipiscing a. Maecenas parturient a dui sodales vestibulum nisl nisi consequat cum lacus lobortis senectus metus at adipiscing cursus parturient a.
</p>
</div>
<div class="bg-image"></div>
</section>Angled border separating li elements
Using CSS:
li {
float: left;
background: #ccc;
margin-right: 50px;
}
li > a {
text-decoration: none;
display: block;
position: relative;
line-height: 40px;
padding: 0 8px;
color: #444;
text-shadow: 0 1px 0 #fff;
}
li > a:before {
content: '';
position: absolute;
border: 20px solid #ccc;
border-left-color: transparent;
border-top-color: transparent;
right: 100%;
top: 0;
}
li > a:after {
content: '';
position: absolute;
border: 20px solid #ccc;
border-right-color: transparent;
border-bottom-color: transparent;
left: 100%;
top: 0;
}
li:first-child > a {
background: #aaa;
}
li:first-child > a:after {
border-top-color: #aaa;
border-left-color: #aaa;
}
li:last-child > a {
background: #ddd;
}
li:last-child > a:before{
border-right-color: #ddd;
border-bottom-color: #ddd;
}
li:last-child > a:after {
border: 0;
}
This is the basic stuff. You should work a little to use it for your purpose.
See demo
See updated demo
Shape with a slanted side (responsive)
There are many ways to create the shape with a slanted edge only on one side.
The following methods cannot support dynamic sizes as already mentioned in the question:
- Border triangle method with pixel values for
border-width. - Linear gradients with the angle syntax (like 45deg, 30deg etc).
The methods that can support dynamic sizes are described below.
Method 1 - SVG
(Browser Compatibility)
SVG can be used to produce the shape either by using polygons or paths. The below snippet makes use of polygon. Any text content required can be positioned on top of the shape.
$(document).ready(function() {
$('#increasew-vector').on('click', function() {
$('.vector').css({
'width': '150px',
'height': '100px'
});
});
$('#increaseh-vector').on('click', function() {
$('.vector').css({
'width': '100px',
'height': '150px'
});
});
$('#increaseb-vector').on('click', function() {
$('.vector').css({
'width': '150px',
'height': '150px'
});
});
})div {
float: left;
height: 100px;
width: 100px;
margin: 20px;
color: beige;
transition: all 1s;
}
.vector {
position: relative;
}
svg {
position: absolute;
margin: 10px;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 0;
}
polygon {
fill: tomato;
}
.vector > span {
position: absolute;
display: block;
padding: 10px;
z-index: 1;
}
.vector.top > span{
height: 50%;
width: 100%;
top: calc(40% + 5px); /* size of the angled area + buffer */
left: 5px;
}
.vector.bottom > span{
height: 50%;
width: 100%;
top: 5px;
left: 5px;
}
.vector.left > span{
width: 50%;
height: 100%;
left: 50%; /* size of the angled area */
top: 5px;
}
.vector.right > span{
width: 50%;
height: 100%;
left: 5px;
top: 5px;
}
/* Just for demo */
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
polygon:hover, span:hover + svg > polygon{
fill: steelblue;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
.vector.left{
clear: both;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vector bottom">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 40,0 40,100 0,60" />
</svg>
</div>
<div class="vector top">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,40 40,0 40,100 0,100" />
</svg>
</div>
<div class="vector left">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 40,0 40,100 20,100" />
</svg>
</div>
<div class="vector right">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 20,0 40,100 0,100" />
</svg>
</div>
<div class='btn-container'>
<button id="increasew-vector">Increase Width</button>
<button id="increaseh-vector">Increase Height</button>
<button id="increaseb-vector">Increase Both</button>
</div>How to create a border that fully covers the adjacent corners in CSS?
You could draw these with inset shadows and padding :
div {
padding:12px 5px 5px;
width: 40%;
height: 200px;
box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px gray
}<div></div>Related Topics
CSS Alternative for Display:Box for Ie and Opera
Apply a CSS Filter Only on Background
How to Make Div Background Color Transparent in CSS
Vertically Center Rotated Text with CSS
Position One Element Relative to Another in CSS
Use Transition on ::-Webkit-Scrollbar
Adding CSS Class Through Aspx Code Behind
How to Draw a Partial Circle Outline in CSS (Open Ring Shape)
CSS Skew Only Container, Not Content
Changing the Color of a Jquery UI Slider as You Slide It
Vertically Center Elements in CSS
Do Double Forward Slashes Direct Ie to Use Specific CSS
Html/CSS Popup Div on Text Click
Use Fontawesome or Glyphicons with CSS :Before
How to Avoid iOS Automatic Font Size Adjustment
How to Change Bootstrap's Global Default Font Size
Horizontally Centering/Evenly Distributed <Li> Inside of <Ul> Inside a <Div>