How to add border to a container with transparent gaps in between
You can use multiple linear-gradient
images as background for the parent div
container like shown in the below snippet. This is one way to achieve it without adding any extra elements.
The background need not be a solid color. This approach can support transparency. The only thing you would need to make note of here is that since we are using percentages in the linear-gradient
, the gap will increase as the height/width increases (and vice-versa). You can see this by using the "Full Page" option.
The transform: translateX(-50%), translateY(-50%)
on the text containers are for vertical and horizontal centering of the content within the space.
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
p {
color: #ffffff;
font-size: 16px;
text-align: center;
padding: 30px;
}
.steps-frame-1 {
position: relative;
height: 30vw;
width: 75vw;
margin: 20px;
background-image: linear-gradient(to right, beige 5%, transparent 5%, transparent 20%, beige 20%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%);
background-size: 100% 2px, 2px 100%, 2px 100%;
background-position: top left, top left, top right;
background-repeat: no-repeat;
border-bottom: 2px solid beige;
}
.left-text,
.right-text {
position: absolute;
top: 50%;
height: 20px;
color: beige;
}
.left-text {
left: 0%;
transform: translateX(-50%) translateY(-50%);
}
.right-text {
right: 0%;
transform: translateX(50%) translateY(-50%);
}
.top-text {
position: absolute;
top: 0%;
left: 12.5%;
content: url(http://www.planetcassandra.org/wp-content/uploads/2014/03/GitHub_Logo.png);
width: 15%;
transform: translateX(-50%) translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="steps-frame-1">
<div class="inner">
<p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy.</p>
</div>
<div class='top-text'></div>
<div class='left-text'>Text</div>
<div class='right-text'>Text</div>
</div>
CSS circle - possible to add a transparent gap between border and background color?
You can achieve that with a pseudo element (.circle::after
) and the following (or similar) settings:
.container {
height: 100px;
background: url('https://picsum.photos/536/354');
}
.circle {
top: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: red;
position: relative;
box-sizing: border-box;
}
.circle::after {
content: '';
position: absolute;
box-sizing: border-box;
border: 3px solid red;
border-radius: 50%;
width: calc(100% + 16px);
height: calc(100% + 16px);
left: -8px;
top: -8px;
}
<div class="container">
<div class="circle"></div>
</div>
How to create a custom border with a gap?
You can use a pseudo element absolutely positioned in your container with a background color that matches whatever the background of your page is.
div {
height: 100px;
border: 1px solid black;
position: relative;
}
div:after {
position: absolute;
top: -1px; left: 50%;
transform: translateX(-50%);
content: '';
background: #fff;
width: 100px;
height: 1px;
}
<div></div>
Creating space between an element and its border
I ended up using the multiple css technique (here), and using border-color: transparent
to create a transparent spacing between the element and its border.
CSS : add space in border corner
You could do it using the before
and after
pseudo selectors:
.top-left-corner {
top:0;
left:0;
position: absolute;
height: 70px;
width: 70px;
}
.top-left-corner:after {
content:'';
position:absolute;
bottom:0;
left:0;
right:20px; /*change this for the size of the gap*/
border-bottom: 1px solid #7a7a7a;
}
.top-left-corner:before {
content:'';
position:absolute;
top:0;
right:0;
bottom:20px; /*change this for the size of the gap*/
border-right: 1px solid #7a7a7a;
}
<div class="top-left-corner"></div>
Related Topics
Get Click Event of Each Rectangle Inside Canvas
Height of Flex Container Not Working Properly in Safari
Some Elements Missing While Downloading from Httpwebrequest
Displaying Elements Other Than Fullscreen Element (Html5 Fullscreen API)
How to Change the Look of Resize Handles
How Would I Remove the Gap Between the Image and the Bootstrap Nav Bar
Changing Background Color of Ionic Ion-Item in CSS
How to Underline All Rows in Textarea
Darken a Background Image Without Affecting the Text
How to Set Font-Family in HTML Select Dropdown List in Ie
How to Move an Element That's on the Top to the Bottom in Responsive Design
CSS Filter:Invert Not Working with Background-Color
Making a Custom Input Text Type
Why Is Using the Style-Attribute in HTML Bad
Codesandbox.Io <Img> Tag Not Loading Image
Css: How to Get Browser Scrollbar Width? (For :Hover {Overflow: Auto} Nice Margins)