I'm trying to add a box shadow to #main-content-area on the top side and 50% to both the left and right sides (from top), but it is not working.
What is wrong with my code?
.wrapper {
position: relative;
}
#main-content-area {
position: relative;
background-color: white;
margin: -80px auto auto auto;
z-index: 4;
border: 1px solid red;
}
.halfshadow {
position: absolute;
z-index: -1;
top: 0;
height: 50%;
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="wrapper">
<div class="line"></div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive" />
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive" />
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive" />
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2">
</div>
</div>
</div>
Just for showing box-shadow I have removed the position: absolute; you can position your div as per your requirement.
.wrapper{
position:relative;
}
#main-content-area{
position:relative;
background-color:white;
margin: -80px auto auto auto;
z-index:4;
border:1px solid red;
}
.halfshadow{
z-index:-1;
height: 50px;
width: 100%;
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}
<div class="wrapper">
<div class="line"></div>
<div class="row" >
<div class="col-sm-2"></div>
<div class="col-sm-8" id="main-content-area">
<div class="row">
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
<div class="col-sm-4">
<img src="me.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="halfshadow"></div>
<div class="col-sm-2" ></div>
</div>
</div>
use width "halfshadow" div or place content. Here is example with added "width"
.halfshadow {
position: absolute;
z-index: -1;
top: 0;
height: 50%;
width: 100%;
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.5);
}
Remove position: absolute; from .halfshadow class
you need to mention div tag
.div1
{
padding: 28px 10px;
/* width: 230px; */
width:200px;
/* margin-right: 31px;
margin-left: 105px;*/
margin-top:10px;
height: 226px;
box-shadow: 10px 10px 5px #888888;
margin-top: -20px;
color: blue;
text-align: center;
}
Related
Im new with css, Im one of our homework in class is to make a box with 4 imgs, that while im mouse hover image it will be bigger in the center of the box.
each image must be with 2 files, small one will start with th and the big one start with big. need to practice the attribute selector.
so I make something, but I just cant fiqure why its not working.
body>div {
width: 100%;
height: 800px;
border: 2px solid black;
}
div {
position: relative;
}
div>div {
position: absolute;
top: 200px;
left: 400px;
}
img {
display: block;
margin: 20px 10px;
}
img[src*="th"] {
width: 250px;
border: 3px solid black;
box-shadow: 10px 10px 10px #666;
}
img[src*="/big"] {
display:none;
}
img[src*="th"]:hover {
box-shadow: inset 10px 10px 10px #666;
}
img[src*="th"]:hover+img[src*="/big"] {
display:block;
}
</style>
<div>
<img src="/HTML/HW/HW27_5/thCar.jpg" alt="">
<img src="/HTML/HW/HW27_5/thHome.jpg" alt="">
<img src="/HTML/HW/HW27_5/thTree.jpg" alt="">
<img src="/HTML/HW/HW27_5/thPlane.jpg" alt="">
<div>
<img src="/HTML/HW/HW27_5/bigCar.jpg" alt="">
</div>
<div>
<img src="/HTML/HW/HW27_5/bigHome.jpg" alt="">
</div>
<div>
<img src="/HTML/HW/HW27_5/bigTree.jpg" alt="">
</div>
<div>
<img src="/HTML/HW/HW27_5/bigPlane.jpg" alt="">
</div>
</div>
Try it by keeping the imgs next to each other.
The "+" works for next sibling element only.
.outer-div {
width: 100%;
height: 500px;
border: 2px solid black;
}
.outer-div {
position: relative;
}
img {
display: block;
margin: 15px 10px;
}
img[src*="/100"] {
border: 3px solid black;
box-shadow: 10px 10px 10px #666;
}
img[src*="/200"] {
display: none;
}
img[src*="/100"]:hover {
box-shadow: inset 10px 10px 10px #666;
}
img[src*="/100"]:hover+img[src*="/200"] {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="outer-div">
<div class="inner-div">
<img src="https://picsum.photos/100" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
<div class="inner-div">
<img src="https://picsum.photos/100" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
<div class="inner-div">
<img src="https://picsum.photos/100" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
<div class="inner-div">
<img src="https://picsum.photos/100" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
</div>
The +-selector select an element that is directly after another element.
Therefor your big image div must be directly next to the smaller image. And you have use this selector img[src*="th"]:hover+div img[src*="/big"] instead of img[src*="th"]:hover+img[src*="/big"] to address the nested image.
body>div {
width: 100%;
height: 800px;
border: 2px solid black;
}
div {
position: relative;
}
div>div {
position: absolute;
top: 200px;
left: 400px;
}
img {
display: block;
margin: 20px 10px;
}
img[src*="th"] {
width: 250px;
border: 3px solid black;
box-shadow: 10px 10px 10px #666;
}
img[src*="/big"] {
display: none;
}
img[src*="th"]:hover {
box-shadow: inset 10px 10px 10px #666;
}
img[src*="th"]:hover+div img[src*="/big"] {
display: block;
}
</style>
<div>
<img src="https://dummyimage.com/250x50/f00&text=/th" alt="">
<div>
<img src="https://dummyimage.com/500x200/f00&text=/big" alt="">
</div>
<img src="https://dummyimage.com/250x50&text=/th" alt="">
<div>
<img src="https://dummyimage.com/500x200&text=/big" alt="">
</div>
<img src="https://dummyimage.com/250x50/0f0&text=/th" alt="">
<div>
<img src="https://dummyimage.com/500x200/0f0&text=/big" alt="">
</div>
<img src="/HTML/HW/HW27_5/thPlane.jpg" alt="">
<div>
<img src="/HTML/HW/HW27_5/bigPlane.jpg" alt="">
</div>
</div>
i'm using position: fixed and width 90% for a footer inside a overlay. The overlay and the footer are both 90% wider but the footer is wider. I guess it's because the footer ignores the scrollbar in chrome. Is there a way to solve this problem without JavaScript?
Here is quick example: https://jsfiddle.net/a15kpuL9/3/
The HTML:
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFooter">
</div>
</div>
</div>
</div>
</div>
The CSS:
.stickyFooter {
width: 90%;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: #F5F5F5;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90%;
}
The Problem:
change the 90% to 90 vw instead. Here you go. :)
.stickyFooter {
width: 90vw;
text-align: center;
position: fixed;
bottom: 0;
height: 150px;
background-color: red;
}
.body {
text-align: left;
-webkit-box-shadow: -7px 0 31px 3px rgba(0, 0, 0, 0.16);
display: inline-block;
background-color: white;
border-radius: 10px;
margin-top: 150px;
width: 90vw;
}
.container {
text-align: center;
vertical-align: middle;
overflow-y: scroll;
height: 100%;
display: block;
width: 100%;
position: absolute;
right: 0;
left: 0;
margin: 0 !important;
max-width: 100%;
padding: 0;
}
.career-detail-inner-wrap {
background: green;
height: 800px
}
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap">
Inner
<div class="stickyFooter">
Sticky
</div>
</div>
</div>
</div>
</div>
I see one less closing div , could that be the problem
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
</div>
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
or
<div class="modal hidden" data-modal-detail="5">
<div class="container">
<div class="body">
<div id="inner-5" class="career-detail-inner-wrap" >
<div class="stickyFoooterSecond">
</div>
</div>
</div>
</div>
</div>
[Web design noob]
I'm trying to create layout like below:
Here's what I have tried so far:
.inner,
.outer {
position: relative;
}
.dash {
border: 0;
border-top: 1px dashed #cfcfcf;
}
.vertical-line {
width: 2px;
height: 100px;
background: 100% #4a90e2;
margin: 0 auto;
}
.outer {
width: 10px;
height: 10px;
border: 1px solid #4a90e2;
border-radius: 50%;
}
.inner {
background-color: #4a90e2;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border: 1px solid #4a90e2;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opportunity</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class="col">
<h1 style="font-size:15px;padding-top:34px;font-family:Lato, sans-serif;font-weight:bold;">HOW YOU CAN REACH MICHAEL</h1>
<hr style="max-width:60px;height:8px;max-height:8px;margin-left:1px;">
</div>
<div class="col-lg-5" style="margin-top:34px;margin-right:40px;">
<div class="row rounded" style="background-image: linear-gradient(-140deg, #2217A4 0%, #8326B8 100%);">
<div class="col" style="padding-top:5px;">
<h5 style="font-size:10px;color:rgb(255,255,255);font-family:Lato, sans-serif;font-weight:bold;margin-top:1px;">Reach out to Philip, for an introduction</h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-1" style="padding-right:0px;padding-left:0px;padding-top:12px;"><img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="rounded pull-right" style="min-width:50px;max-width:50px;">
<div class="vertical-line" style="margin-right:24px;"></div>
<div class="outer" style="margin-right:0px;padding-right:0px;">
<div class="inner" style="padding-right:-3px;"></div>
</div>
</div>
<div class="col" style="padding-top:12px;">
<h5 style="font-size:15px;margin-bottom:0px;font-family:Lato, sans-serif;font-weight:bold;">John Doe (You)</h5>
<h5 style="color:#797979;font-size:15px;font-family:Lato, sans-serif;">Founder at ESOP International</h5>
<hr class="dash" style="margin-top:45px;">
</div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</body>
</html>
Can anyone please help me in
Aligning vertical and horizontal 'lines' in between cols
Adding rectangle like on right side of layout?
I have changed the layout based on your image structure. Include bootstrap and try the below code. I hope this solution will be helpful.
* {
box-sizing: border-box;
position: relative;
font-family: Lato, sans-serif;
}
.combo-box h5 {
background-image: linear-gradient(-140deg, #2217A4 0%, #8326B8 100%);
font-size: 11px;
color: rgb(255, 255, 255);
font-family: Lato, sans-serif;
font-weight: bold;
padding: 10px 10px;
text-align: center;
border-radius: 3px;
}
.combo-box h3 {
font-size: 15px;
font-family: Lato, sans-serif;
font-weight: bold;
position: relative;
}
.combo-box h3::after {
position: absolute;
content: "";
width: 70px;
background-color: rgba(0, 0, 0, 0.1);
height: 1px;
bottom: -8px;
left: 0;
}
.combo-box {
padding: 0 25px;
}
.combo-box ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.combo-box ul:last-child:before {}
.combo-box ul::before {
position: absolute;
content: "";
background: #4b90e2;
width: 1px;
height: 100%;
left: 30px;
}
.combo-box ul li {
position: relative;
margin: 0 0 0;
padding: 0 0 0;
list-style: none;
}
.combo-box .img img {
width: 60px;
}
.combo-box .profile-desc h4 {
font-size: 15px;
font-weight: 600;
margin: 0 0 0;
}
.combo-box .profile-desc small {
color: #888;
}
.combo-box li.left {
display: flex;
}
.combo-box ul li.right::after {
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid #4b90e2;
border-radius: 50%;
left: 25px;
top: 40%;
background: #fff;
padding: 2px;
}
.combo-box ul li.right:before {
border-top: 2px dashed #ccc;
position: absolute;
content: "";
left: 30px;
width: 85%;
top: 50%;
}
.combo-box .inner-desc {
display: flex;
}
.combo-box ul li.right .inner-desc:before {
position: absolute;
content: "";
left: 28px;
background: #4b90e2;
width: 6px;
height: 6px;
border-radius: 50%;
top: 47%;
z-index: 9;
}
.combo-box ul li.right {
text-align: right;
}
.combo-box ul li.right p {
margin-left: auto;
text-align: right;
font-size: 12px;
display: inline-block;
background: #f8f8f8;
border: 1px solid #e6e6e6;
padding: 5px 8px;
margin-bottom: 0;
line-height: 18px;
border-radius: 3px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container my-5">
<div class="combo-box">
<div class="row">
<div class="col-md-7">
<h3>HOW YOU CAN REACH MICHAEL</h3>
</div>
<div class="col-md-5">
<h5>Reach out to Philip, for an introduction</h5>
</div>
</div>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
</ul>
</div>
</div>
I have tried by changing some of the structure
have a look at the pen.
I have used the positioning by position: absolute; of the line and round dot.
Please check and ask if any query
.inner,
.outer {
position: relative;
}
.dash {
border: 0;
border-top: 1px dashed #cfcfcf;
}
.vertical-line {
width: 2px;
height: 100px;
background: 100% #4a90e2;
margin: 0 auto;
}
.outer {
width: 10px;
height: 10px;
border: 1px solid #4a90e2;
border-radius: 50%;
}
.inner {
background-color: #4a90e2;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border: 1px solid #4a90e2;
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opportunity</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,700i,900">
<link rel="stylesheet" href="assets/css/styles.min.css">
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class="col">
<h1 style="font-size:15px;padding-top:34px;font-family:Lato, sans-serif;font-weight:bold;">HOW YOU CAN REACH MICHAEL</h1>
<hr style="max-width:60px;height:8px;max-height:8px;margin-left:1px;">
</div>
<div class="col-lg-5" style="margin-top:34px;margin-right:40px;">
<div class="row rounded" style="background-image: linear-gradient(-140deg, #2217A4 0%, #8326B8 100%);">
<div class="col" style="padding-top:5px;">
<h5 style="font-size:10px;color:rgb(255,255,255);font-family:Lato, sans-serif;font-weight:bold;margin-top:1px;">Reach out to Philip, for an introduction</h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-1" style="padding-right:0px;padding-left:0px;padding-top:12px;"><div style="
position: relative;
display: inline-block;
"><img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="rounded pull-right" style="min-width:50px;max-width:50px;">
<div class="vertical-line" style="position: absolute;left: 50%;margin-left: -1px;"></div>
<div class="outer" style="margin-right:0px;padding-right:0px;position: absolute;left: 50%;transform: translateX(-50%);top: 85px;z-index: 9;background-color: white;">
<div class="inner" style="padding-right:-3px;"></div>
</div></div></div>
<div class="col" style="padding-top:12px;">
<h5 style="font-size:15px;margin-bottom:0px;font-family:Lato, sans-serif;font-weight:bold;">John Doe (You)</h5>
<h5 style="color:#797979;font-size:15px;font-family:Lato, sans-serif;">Founder at ESOP International</h5>
<hr class="dash" style="margin-top:45px;">
</div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Here's a link to a CodePen
I am trying to apply CSS transform on my grid elements so on :hover I get a nice transition on the borders.
I am doing something wrong, most likely with positioning of the elements and the grid so it's not working.
When transform scaleX is applied, the borders disappear and won't show as expected on hover.
.work {
background: var(--white);
}
.work-wrapper {
max-width: 1170px;
padding: 1em;
margin: auto;
display: grid;
grid-template-columns:repeat( auto-fill, minmax(260px, 1fr) );
grid-row-gap: 30px;
grid-column-gap: 15px;
place-items: center start;
background: #333;
}
.work-item {
height:180px;
width:260px;
position: relative;
background: var(--lilavo);
margin: auto;
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.4);
}
.item::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
right:10px;
bottom: 10px;
border-top: 1px solid var(--white);
border-bottom: 1px solid var(--white);
transition: 0.5s;
-webkit-transform:scaleX(0);
-moz-transform:scaleX(0);
-ms-transform:scaleX(0);
-o-transform:scaleX(0);
transform:scaleX(0);
opacity: 0;
}
.item::before:hover {
-webkit-transform:scaleX(1);
-moz-transform:scaleX(1);
-ms-transform:scaleX(1);
-o-transform:scaleX(1);
transform:scaleX(1);
opacity: 1;
}
<section id="work" class="work">
<h2>Work</h2>
<div class="work-wrapper">
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
</div>
</section>
Use .item and .work-item:hover > .item selector instead of .item::before and .item::before:hover respectively. It will work! :)
.work {
background: var(--white);
}
.work-wrapper {
max-width: 1170px;
padding: 1em;
margin: auto;
display: grid;
grid-template-columns:repeat( auto-fill, minmax(260px, 1fr) );
grid-row-gap: 30px;
grid-column-gap: 15px;
place-items: center start;
background: #333;
}
.work-item {
height:180px;
width:260px;
position: relative;
background: var(--lilavo);
margin: auto;
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.4);
}
.item {
content: '';
position: absolute;
top: 10px;
left: 10px;
right:10px;
bottom: 10px;
border-top: 1px solid white;
border-bottom: 1px solid white;
transition: 0.5s;
-webkit-transform:scaleX(0);
-moz-transform:scaleX(0);
-ms-transform:scaleX(0);
-o-transform:scaleX(0);
transform:scaleX(0);
opacity: 0;
}
.work-item:hover > .item {
-webkit-transform:scaleX(1);
-moz-transform:scaleX(1);
-ms-transform:scaleX(1);
-o-transform:scaleX(1);
transform:scaleX(1);
opacity: 1;
}
<section id="work" class="work">
<h2>Work</h2>
<div class="work-wrapper">
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
<div class="work-item">
<div class="item item-one"></div>
</div>
</div>
</section>
You can test it here as well.. https://jsfiddle.net/nimittshah/tj95b6kL/
This question already has answers here:
Add rounded borders to selected corners of an element
(2 answers)
Closed 5 years ago.
I have created a broken border effect but I do not want the sharp look on the end of the border I would like it boxed off. I have messed with border-radius and everything i can think of but cant think of anything. Any input would be much appreciated.
I would like for it to look like this:
.container{padding-top: 40px;}
a h3{margin-top:0!important;}
.col-sm-15{
width: 18%;
margin:1%;
height: 4em;
float:left;
position:relative;
}
.col-sm-15 .wrap:before{
content: '';
position: absolute;
width: 50%;
height: calc(100% - 10px);
bottom: 0;
left: 0;
border: 10px solid transparent;
border-bottom-color: #330099;
border-left-color: #330099;
}
.col-sm-15 .wrap:after{
content: '';
position: absolute;
width: 50%;
height: calc(100% - 10px);
top: 0;
right: 0;
border: 10px solid transparent;
border-top-color: #330099;
border-right-color:#330099;
}
a h3{
font-size: 20px;
color: #000000;
padding: 10px;
margin-top: 3.2em;
}
a:hover{text-decoration: none;}
a:hover h3{color: #330099;}
<section id="funnnels">
<div class="container">
<div class="row padd">
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>Option 1</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 2</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 3</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 4</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 5</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</section>
Do like this instead and the border doesn't get a sharp end
border-bottom: 10px solid #330099;
border-left: 10px solid #330099;
I also reduced the height a little more than the set 10px, to 30px (height: calc(100% - 30px);)
Stack snippet
.container {
padding-top: 40px;
}
a h3 {
margin-top: 0!important;
}
.col-sm-15 {
width: 18%;
margin: 1%;
height: 4em;
float: left;
position: relative;
}
.col-sm-15 .wrap:before {
content: '';
position: absolute;
width: 50%;
height: calc(100% - 30px);
bottom: 0;
left: 0;
border-bottom: 10px solid #330099;
border-left: 10px solid #330099;
}
.col-sm-15 .wrap:after {
content: '';
position: absolute;
width: 50%;
height: calc(100% - 30px);
top: 0;
right: 0;
border-top: 10px solid #330099;
border-right: 10px solid #330099;
}
a h3 {
font-size: 20px;
color: #000000;
padding: 10px;
margin-top: 3.2em;
}
a:hover {
text-decoration: none;
}
a:hover h3 {
color: #330099;
}
<section id="funnnels">
<div class="container">
<div class="row padd">
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>Option 1</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 2</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 3</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 4</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
<div class="col-sm-15 text-center">
<a href="#">
<div class="wrap">
<h3>option 5</h3>
</div>
</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</section>