Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I was wondering if it's possible to make such design using CSS?
I would greatly appreciate any piece of code.
I would do it that way,
#box1, #box2 , #box3
{
width: 25%;
height: 25%;
position: absolute;
}
#box1
{
left: 25%;
top: 25%;
border-left: 2px dashed black;
border-right: 1px dashed black;
border-bottom: 2px dashed black;
z-index: 1;
}
#box2
{
right: 25%;
top: 25%;
border-left: 1px dashed black;
border-right: 2px dashed black;
border-bottom: 2px dashed black;
z-index: 1;
}
#box3
{
right: 37.5%;
top: 40%;
z-index: 2;
}
box3 is layered above box1 & box2 so it will hide the 'extra' border.
that will get you the basic design. (alter the sizes to your needs)
you will have to add the arrow-heads by creating CSS triangles, or using images and absolute position them as well.
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 is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am attempting to get my #image-square div to be 9px from the #inside-preview top. I am not sure why it isn't working. I have tried changing its position from absolute to relative as well as top margin-top, I added block. I don't see why it isn't working.
Help please.
#outside-preview, #inside-preview {
border: 1px solid black;
border-radius: 8px;
/*display: inline-block;*/
}
#outside-preview {
width: 500px;
height: 600px;
position: relative;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
#inside-preview {
width: 440px;
height: 568px;
position: absolute;
z-index: 1;
left:5%;
bottom: 0;
}
#image-square {
top: 9x;
width: 400px;
height: 174px;
background: red;
position: relative;
display: block;
z-index: 2;
}
<div>
<div class="container" id="outside-preview">
<div class="container" id="inside-preview">
<div id="image-square"></div>
</div>
</div>
</div>
Does this accomplish what you are trying to do?
http://codepen.io/anon/pen/RRBprj
It looks like adding margin-top:9px; worked fine.
Try this:
#image-square {
margin-top: 9px;
width: 400px;
height: 174px;
background: red;
position: relative;
z-index: 2;
}
try putting
9px instead of 9x to start..
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have this problem: i am not a design person. i just simply dont know how to make this arrow under the rectangle:
i tried to make a div with this background color and hang some image under it, but i am trying to do this for 2 hours now and i am totally stuck not finding a image tool which cuts out in triangle form. then i decided to do this thru css, but cannot somehow do it.
how can i do this triangle in css and hang to div? i want that if i resize window, the triangle should stick to div and doesnot move.
many many thanks for help in advance.
DEMO
HTML
<div class="arrow-down"></div>
css
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
Updated Demo
HTML
<div id="div1"><div class="arrow-down"></div></div>
css
#div1{
width:200px;
height:200px;
background-color:#f00;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
position:absolute; //added position:absolute
}
js
$(document).ready(function () {
$('.arrow-down').css('top', $('#div1').height() + 5).css('left', '20px');
});
or you can make use of :after only css effect
DEMO
HTML
<div>
<p>Testing triangle</p>
</div>
CSS
div {
margin: 50px;
padding: 10px 20px;
float: left;
background-color: #f00;
position: relative;
}
div:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
content:"";
position: absolute;
bottom: -20px;
left: 20px;
}