Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I wanna know how to create this shape in the picture using css, I crated the same but the main div go to the back.
<div>Elzero</div>
check this pic please
Something like this?
body {
margin: 1em;
font-size: 4em;
}
div {
background: #eee;
border: .1em solid #ccc;
color: #06a9f4;
font-weight: bold;
padding: 1.5em 0;
position: relative;
text-align: center;
}
div::before,
div::after {
background: currentColor;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -.1em;
right: -.1em;
z-index: -1;
transform: rotate(-8deg);
}
div::after {
background: #e92a63;
transform: rotate(8deg);
}
<div>Elzero</div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am designing one card just like this.
I am wondering how to create a vertical line just below the circle as shown in the picture.
You can use CSS with position to achieve it along with ::before:
.circle {
width: 100px;
height: 100px;
border: 2px solid #ccc;
border-radius: 100%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
position: relative;
margin-top: 50px;
}
.circle:first-child {
margin-top: 0;
}
.circle::after {
position: absolute;
content: "";
display: block;
border: 2px solid #ccc;
left: 50%;
bottom: 100%;
height: 50px;
margin-left: -2px;
}
.circle:first-child::after {
display: none;
}
<div class="wrap">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
Preview
adjust the height and width of horizontal to be a vertical line using hr tag
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to make a CSS shape with a rounded bottom corner with border-radius, but failing to understand how to:
.rounded-css {
border-radius: 5px;
display: block;
background: #669999;
width: 150px;
height: 200px;
}
<div class="rounded-css"></div>
Expected output:
You can use border-radius: 0 0 50% 50%; to make the whole bottom part round. With adding a white pseudo element ::after, you can "cut" the unwanted upper part to only show the curve:
.rounded {
border-radius: 0 0 50% 50%;
display: block;
background: #669999;
width: 100%;
height: 70px;
margin-top: -35px;
}
.rounded::after {
content: "";
display: block;
width: inherit;
height: 35px;
background: white;
}
<div class="rounded"></div>
I think you can adapt this to the container you want to put this in. I think it's pretty much what you are looking for.
.rounded-css {
border-radius: 100%;
display: block;
background: black;
border-bottom: 40px #669999 solid;
border-top: 40px transparent solid;
position: relative;
top: -60px;
overflow: hidden;
}
<div class="rounded-css"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have to implement this content separator in my web page using html/css but I cannot find the implementation.
I have the .svg and .png pictures of this flower. Can you show me the steps of doing this, or give me links to some well-explained tutorials. I appreciate any help!
Flexbox and a couple of pseudo-elements make this simple.
span {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
span::before,
span::after {
content: '';
flex: 1;
height: 2px;
background: teal;
margin: .5em;
}
<span><img src="http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg" alt="" /></span>
Related Question
Here's a solution with pseudo element :after
.separator { border-bottom: 1px solid #333; position: relative; margin-top: 30px; }
.separator:after {
content: "";
position: absolute;
left: 50%;
margin-left: -25px; /* half of the image width */
top: -20px;
background: url('http://www.swimmingpoolmosaics.com/images/thumbnails/50/50/variant_image/0/fleur-de-lis-teal.jpg') no-repeat #fff;
width: 50px;
height: 50px;
}
<div class="separator"></div>
A typical HR revisited.
You can use a pseudo to introduce an image on top of it:
hr {
position:relative;
margin:2em 1em;
color:lighgray;
}
hr:before {
content:url(http://i1253.photobucket.com/albums/hh600/fleur-de-lis-xxx/favicon-bright.png);
position:absolute ;
text-align:center;
left:50%;
background:white;
z-index:1;
height:2em;
width:30px;
margin:-15px;
}
<hr/>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to create a jumbotron (maybe use another component) with left arrow attached that's pointing to the text in the left another column.
The image bellow shows exactly what i'm trying to do.
How exactly does this work and how is it accomplished?
left-arrow-box
This can be done by using another component with customized border attribute.
For example,
CSS:
.jumbo {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.jumbo .arrow {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.arrow::after {
content: "";
position: absolute;
top: 20%;
right: 100%;
margin-top: -8px;
border-width: 20px;
border-style: solid;
border-color: transparent black transparent transparent;
}
HTML:
<div class="jumbo">
<span class="arrow">Jumbotron</span>
</div>
P.S. You may need to adjust the attributes to fit your needs.
Here is the jsfiddle
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How can I make this shape in html5 and css3?
#big {
position: relative;
background: black;
width: 600px;
height: 600px;
}
#in {
position: absolute;
background: black;
width: 280px;
height: 280px;
bottom:0;
right: 0;
border-top: 20px solid white;
border-left: 20px solid white;
}
<div id="big">
<div id="in"></div>
</div>