I have an issue with borders when I try to print the page. Can someone help with this?
Code:
https://codepen.io/anon/pen/XPvQxw
body {
-webkit-print-color-adjust: exact !important;
}
header {
width: 100%;
}
header .small {
font-weight: 500;
}
.header__container {
max-width: 600px;
margin: 0 auto;
text-align: center;
padding: 0 15px;
}
.header__title {
font-family: 'Times New Roman';
font-weight: 700;
}
.header__separator {
border-top: 2px solid #fff;
margin-bottom: .5rem;
}
.bg {
position: relative;
background-color: blue;
color: #fff;
padding: 10px 0;
}
.bg:before, .bg:after {
content: "";
position: absolute;
}
.bg:before {
top: 0;
left: 0;
border-bottom: 20px solid blue;
border-left: 20px solid #FFF !important;
border-right: 20px solid #FFF !important;
width: 100%;
height: 0;
}
.bg:after {
bottom: 0;
left: 0;
border-top: 20px solid blue;
border-left: 20px solid #FFF !important;
border-right: 20px solid #FFF !important;
width: 100%;
height: 0;
}
.bg__container { position: relative; z-index: 100; }
.list { list-style: none; margin: 0; padding: 0; }
.list-item { display: inline-block; }
.list-item:before { content: '|'; font-weight: 300; font-size: .8rem; }
.list-item:first-child:before { content: none; margin-left: 0; }
.list-item a { color: #fff; text-transform: uppercase; font-size: 13px; font-weight: 500; text-decoration: none; margin-left: 6px; margin-right: 3px; }
.list-item a:hover { color: #ddd; }
.text-red { color: red; }
.text-blue { color: blue; }
.text-black { color: black; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<header class="header bg mt-4 mb-4">
<div class="header__container bg__container">
<div class="header__top">
<h3 class="header__title">Title</h3>
<p class="h6">Sub-title</p>
<p class="h6 small">AND</p>
<p class="h6">Sub-title</p>
</div>
<hr class="header__separator">
<nav class="header__nav">
<ul class="header__nav-list list mb-1">
<li class="header__nav-list-item list-item"><a href="#">home</a></li>
<li class="header__nav-list-item list-item"><a href="#">home</a></li>
<li class="header__nav-list-item list-item"><a href="#">home</a></li>
<li class="header__nav-list-item list-item"><a href="#">home</a></li>
</ul>
<ul class="header__nav-list list">
<li class="header__nav-list-item list-item"><a href="#">home</a></li>
<li class="header__nav-list-item list-item"><a href="#">home</a></li>
<li class="header__nav-list-item list-item"><a href="#">home</a></li>
</ul>
</nav>
</div>
</header>
2
Answers
Might be easier to use the
clip-path
property to clip out the corners completely (avoiding problems with the “corner-border hack”).Result: https://codepen.io/anon/pen/BOXgPo
You can try something different for the background to avoid this, here is an idea with gradient to create the white corner: