im trying to create this kind of border, is there a way to do it with css? thanks for the help enter image description here
i have no idea how to even search for this...
Here is one example using pseudo-elements.
body {
background: #000;
}
div {
height: 300px;
border: 1px solid orange;
position: relative;
max-width: 600px;
margin: auto;
}
div:after {
position: absolute;
top: -1px;
left: 40%;
transform: translateX(-50%);
content: '';
background: #000;
width: 200px;
height: 1px;
}
div:before {
content: "";
position: absolute;
top: 20px;
left: 0%;
transform: translateX(-50%);
background: #000;
height: 100px;
width: 3px;
}
<div></div>
Probably the easiest approach is to have a div, with a border, and then set that div's position as relative. Then put 1 or more divs within that div positioned absolute and size them and position them to cover up parts of the border as shown above. Then put the div content on a higher z-level than those divs that cover part of the border
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
padding: 20px;
}
.card {
position: relative;
width: 75%;
border-style: solid;
border-width: 1px;
border-color: red;
padding: 10px;
}
.block1 {
position: absolute;
z-index: 2;
width: 50%;
height: 2px;
background-color: white;
top: -2px;
left: 10%;
}
.block2 {
position: absolute;
z-index: 2;
width: 2px;
height: 60%;
background-color: white;
top: 5%;
left: -2px;
}
.content {
z-index: 3;
}
<div class="container">
<div class="card">
<div class="block1"></div>
<div class="block2"></div>
<div class="content">
<h1>Something</h1>
<h3>random text<h3>
<hr>
<h3>random text<h3>
<hr>
<h3>random text<h3>
<hr>
<h3>random text<h3>
<hr>
<h3>random text<h3>
<hr>
<h3>random text<h3>
</div>
</div>
</div>
Just mess around with the top and left values for the block1 and block2 classes to get the effect you would like
Heres what I did and it works - also with pseudo elements
Thank you all for your answers!
.border-one:after{
content: "";
border-top: 7px solid #1B1B1B;
width: 300px;
position: absolute;
top: -22px;
left: 183px;
margin: 20px;
display: block;
z-index: 99999;}
.border-one:before{
content: "";
border-left: 7px solid #1B1B1B;
height: 140px;
position: absolute;
top: 72px;
left: -9px;
margin: 20px;
display: block;
z-index: 99999;}
Related
For a picture preview I want to put 2 invisble divs (red/blue in the picture) in front of a picture for next/previous image functionality.
I would like to have the div ("pictureContainer"/ green bordered zone) to automatically take over the dimension of the containing picture but I can't find a PURE CSS solution without setting the width and the height manually.
.container {
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
/* I don't want to set width and hight manuyally.
The container should have the size if the contained image. */
height: 50%;
width:300px;
position: relative;
margin: auto;
border: 3px solid green;
}
.leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
opacity: 80%;
}
.rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
opacity: 80%;
}
.picture {
position: absolute;
top: 0;
left: 0;
margin: auto;
z-index: -1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
Also the container should be horizontally aligned.
Note: The full screen white div with the black border is used to close the picture preview.
You should change so the divs have absolut: position, let the image have it's natural size, container should be display: inline-block;
.container {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
position: relative;
display: inline-block;
margin: 0 auto;
border: 3px solid green;
}
.picture {
display: block;
}
.leftSide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: blue;
width: 50%;
opacity: 80%;
z-index: 1;
}
.rightSide {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: red;
height: 100%;
width: 50%;
opacity: 80%;
z-index: 1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
I need to create a circle with an image inside, so far I almost achieved this but I want set the content dimension too, this is my code:
.circle {
position: absolute;
z-index: 10;
top: -25%;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
content: url("logo");
}
<img class="img-responsive center-block circle">
this is a fiddle.
As you can see I have to display only half of the circle, but the problem is that the logo is not entire visible. How can I manage this?
To fix this you needed to give the img a z-index greater than the circles and then center it ontop of the circle.
Here's the code:
.circle{
background-color: red;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align:center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.img {
content: url("https://www.google.it/logos/doodles/2019/rugby-world-cup-2019-opening-day-6753651837108235-l.png");
z-index: 10;
position: absolute;
left: 50%;
transform : translateX(-50%);
}
<div class="circle">
</div>
<div class="img">
</div>
here is the jsfiddle fix: http://jsfiddle.net/t5L49f7g/
Hope this helps!
Simple question, but don't know how to google it.
When no quantity to draw line. How to draw in list box something like this?
Just need simple css answer. Thank you.
You can do that by adding a pseudo element to the quantity element.
.quantity {
display: inline-block;
padding: 8px 12px;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.quantity--strikethrough:before {
content: '';
width: 100%;
height: 2px;
background: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(-45deg);
transform-origin: 50% 50%;
}
<div class="quantity">
6 vnt.
</div>
<div class="quantity quantity--strikethrough">
12 vnt.
</div>
If you simply want to draw a line on the element, this could be of use to you. Hope it helps!
.element{
position:relative;
display: inline-block;
}
.element:before{
content: "";
height: 1px;
width: 100%;
position:absolute;
top:50%;
background-color: #000;
}
<p class="element">Empty</p>
.block {
border: 1px solid;
display: inline-block;
margin: 2px;
padding: 0 2px;
position: relative;
overflow: hidden;
}
.line:before {
position: absolute;
content: "";
left: -10%;
top: 50%;
right: -10%;
border-top: 2px solid blue;
transform: rotate(-35deg);
}
<div class="block">100</div>
<div class="block line">50</div>
<div class="block line">50</div>
<div class="block line">150</div>
here is my try
div {
position: relative;
display: inline-block;
border: 1px solid #333;
padding: 10px;
float: left;
margin: 10px;
}
.cutoff {
overflow: hidden;
}
.cutoff::after {
height: 1px;
content: '';
width: 100%;
position: absolute;
background-color: blue;
left: 0;
transform: rotate(145deg);
top: 20px;
}
<div class="">
some text
</div>
<div class="cutoff">
some text
</div>
<div class="cutoff">
some text
</div>
I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea
I drew a cloud via CSS3 using different div tags I am trying to add a border to the whole shape but I am having trouble since every shape get its own border how can I apply a border to the whole cloud?
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #4ca3ff;
}
#cloud {
position: absolute;
}
#bottom_c {
position: relative; top: 200px; left: 500px;
width: 350px;
height: 150px;
background-color: #fff;
border-radius: 100px;
border: solid 5px black;
z-index: 100;
}
#right_c{
position: absolute; top: 140px; left: 640px;
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
#left_c{
position: absolute; top: 170px; left: 550px;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
Image:
You can do it without any additional elements. Just use the ::before and ::after pseudo-elements with the same size and round shape as the top cloud bubbles. z-index keeps everything in the right layer.
Demo:
Output:
CSS:
body{
background-color: #4ca3ff;
}
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
Thank you for the original solution! I needed to create multiple clouds and dynamically resize and recolor them, so I adapted to original solution as follows:
I made the clouds resizable by using percentages values for the height, width, top and left properties. The .cloud class uses padding-top to adjust the height of the cloud relative to the cloud's width.
I made the :before and :after pseudo-elements divs.
I changed the id selectors to class selectors
And I reorganized the properties so they're easier to read.
I hope this helps someone. Here's the code:
Output
I don't yet have the reputation to post images :/. So here's a link to the output: http://imgur.com/nN9dBiQ
CSS:
.cloud {
position: relative;
width: 100%;
padding-top: 57.5%;
box-sizing: border-box;
}
.cloud_bottom,
.cloud_left,
.cloud_right {
border: solid 5px black;
}
.cloud_bottom,
.cloud_left,
.cloud_right,
.cloud_leftCircle,
.cloud_rightCircle {
background-color: #fff;
}
.cloud_bottom {
position: absolute;
top: 43.48%;
height: 65.2%;
width: 87.5%;
border-radius: 100px;
z-index: 0;
}
.cloud_left {
position: absolute;
top: 30.43%;
left: 12.5%;
height: 43.48%;
width: 25%;
border-radius: 100%;
z-index: -1;
}
.cloud_right {
position: absolute;
top: 17.39%;
left: 35%;
height: 65.2%;
width: 37.5%;
border-radius: 100%;
z-index: -1;
}
.cloud_leftCircle {
position: absolute;
top: 32.61%;
left: 13%;
height: 43.48%;
width: 25%;
border-radius: 50%;
z-index: 1;
}
.cloud_rightCircle {
position: absolute;
top: 23.48%;
left: 35%;
height: 65.21%;
width: 37.5%;
border-radius: 50%;
z-index: 1;
}
HTML:
<div class="firstCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
<div class="secondCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
JavaScript:
function updateCloudColor(cloudElement, color) {
cloudElement.children().css("background-color", color);
}
$(window).load(function () {
updateCloudColor($(".firstCloud"), "red");
updateCloudColor($(".secondCloud"), "blue");
});