This question already exists:
Calculate position of 3 absolutely positioned elements [duplicate]
Closed 2 years ago.
I am trying to position 3 elements around a circle using CSS only. I have nudged the elements into position by eye, but I am assuming there is a mathematical (PLEASE NOTE: mathematical, NOT programatic) way to determine the top and left numbers for each of the three elements.
The motive here is that I will be rotating the entire block, and the elements should be in the same position after each rotation.
#rotator {
position: relative;
border: 1px solid red;
width: 100px;
height: 100px;
border-radius: 50px;
margin-top: 20px;
}
#rotator div {
position: absolute;
border: 1px solid blue;
width: 24px;
height: 24px;
border-radius: 12px;
text-align: center;
background: rgba(255, 255, 255, 0.75);
}
#rotator div#a {
top: -12px;
left: 38px;
}
#rotator div#b {
bottom: 0;
right: 0;
}
#rotator div#c {
bottom: 0;
left: 0;
}
<div id="rotator">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>
Unfortunately, you cannot do this without a preprocessor, for example SCSS. Thanks #Stef for the formula for the vertices of a regular triangle.
[CODE][1]
[1]: https://codepen.io/BlackStar1991/pen/xxVLMVG
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 11 months ago.
I have a task to do the following figure. but I don't know how to design the arrow alongside the column.
my code:
p {
background-color: #eee;
padding: 20px;
margin-left: 110px;
width: 400px;
}
p::before {
content: attr(data-person);
background-color: #ddd;
position: absolute;
left: 5px;
margin-top: -15px;
padding: 15px;
display: inline-block;
width: 45px;
text-align: center;
}
p::after {
content: "";
background-color: #e84747;
padding: 5px;
height: 48.56px;
position: absolute;
left: 108px;
margin-top: -20px;
}
<p class="one" data-person="Osama">This Is Very Very Long Comment Number One</p>
<p class="two" data-person="Ahmed">This Is Very Very Long Comment Number Two</p>
<p class="three" data-person="Sayed">This Is Very Very Long Comment Number Three</p>
I used my before and after properties, if I do the arrow I won't do the column and vice versa.
Easiest way is to put a left border on the p and that frees up the ::after pseudo element for the triangle. Make sure you put position: relative on the p and then all the position: absolutes are based on that.
The actual triangle is created by making a series of borders transparent and one colors, and with the same size (to make a square).
The way this all works is that the borders meet at the corners as mitres (like a picture frame) and so when all of them are the same - its as if there is a square with 4 inward facing trangles and only one of the m has the color - hence the colored triangle.
p{
background-color: #eee;
padding: 20px;
margin-left: 110px;
width: 400px;
border-left: solid 5px #e84747;
position: relative;
}
p::before{
content:attr(data-person);
background-color: #ddd;
position: absolute;
left: -110px;
margin-top: -15px;
padding: 15px;
display: inline-block;
width: 45px;
text-align: center;
}
p::after{
content: "";
position: absolute;
left: -15px;
top: calc(50% - 10px);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #e84747;
}
<p class="one" data-person="Osama">This Is Very Very Long Comment Number One</p>
<p class="two" data-person="Ahmed">This Is Very Very Long Comment Number Two</p>
<p class="three" data-person="Sayed">This Is Very Very Long Comment Number Three</p>
This question already has an answer here:
Is there a better way to create convex / concave borders on an element
(1 answer)
Closed 1 year ago.
I want to create rounded corners of the section (I can do it with border-radius), but those sections intersect with each other and besides border radius theres this weird cut from the other section (see image)
Is there any way I can code it without using pictures of those sections?
You can also achieve that using the :after pseudo element for the top section and bring that element back using z-index so it won't overlap the bottom section.
Here's an example:
.container {
width: 50%;
height: 200px;
display: flex;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
flex-direction: column;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.top-section {
flex-grow: 1;
background-color: #1B2149;
border-radius: 0 0 0 25px;
position: relative;
}
.top-section:after {
content: " ";
z-index: -1;
right: 0;
bottom: -30px;
height: 30px;
width: 40px;
position: absolute;
background-color: inherit;
}
.bottom-section {
flex-grow: 1;
border-radius: 0 25px 0 0;
background-color: #FFFFFF;
}
<div class="container">
<div class="top-section"></div>
<div class="bottom-section"></div>
</div>
Yes, you can create an element with absolute position with a pseudo-element and using a background and transparent combination create a curve and place it using absolute positioning.
however, in this case you can get the result with a much simpler solution.
All you need to do is wrap each area within a div that has the other background and show it with a border radius.
#container {
background-color: #e4e4e4;
width: 400px;
padding: 0 20px;
border: 1px solid #333;
}
.placeholder {
height: 200px;
}
#top_div_back {
background-color: #fff;
}
#top_div_front {
background-color: #1a2048;
border-bottom-left-radius: 25px;
}
#bottom_div_back {
background-color: #1a2048;
}
#bottom_div_front {
background-color: #fff;
border-top-right-radius: 25px;
}
<div id="container">
<div id="top_div_back">
<div id="top_div_front" class="placeholder">
</div>
</div>
<div id="bottom_div_back">
<div id="bottom_div_front" class="placeholder">
</div>
</div>
</div>
This is by far the easiest and most stable solution for your needs.
This question already has answers here:
Create a horizontal rule with text in the middle? [duplicate]
(5 answers)
Closed 3 years ago.
There are many questions (and answers) about how to create a heading with centered text and a horizontal line either side, but what I'd like to achieve is slightly different.
I'd like to add vertical lines to the left and right end of the lines:
I have got close to what I'd like using this code:
body {
padding: 50px;
}
div.outer {
width: 100%;
height: 15px;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
text-align: center;
margin: auto;
position: relative;
}
div.outer>span {
font-size: 16px;
background-color: #FFF;
padding: 0 10px;
position: absolute;
top: -10px;
left: 47%;
}
<div class="outer">
<span>A Heading</span>
</div>
pen
Can anyone please point me in the right direction?
UPDATE
Thank you #nvioli for pointing me in the right direction. I ended up using a combination of your answer and flex based on this post
Here’s what worked for me: pen
I would suggest adding another div outside what you have there. You've done a nice job making the horizontal line and centering the text (which is the hard part IMO), so wrapping the whole thing in a bigger div (twice as tall) and moving the inner div down half the height seems to work.
Note I've renamed your outer div to inner and added a new outer.
body {
padding: 50px;
}
div.outer {
border-right: 1px solid black;
border-left: 1px solid black;
height:30px;
}
div.inner {
width: 100%;
height: 15px;
border-top: 1px solid black;
text-align: center;
margin: auto;
position: relative;
top:15px;
}
div.inner > span {
font-size: 16px;
background-color: #FFF;
padding: 0 10px;
position: absolute;
top: -10px;
left: 47%;
}
<div class="outer">
<div class="inner">
<span>A Heading</span>
</div>
</div>
Basically I am trying to create a hexagonal shape, which would have a circle inside it and the extra parts of the circle should be hidden.
Demo: https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100
My HTML:
<div class="container">
<div class="radius-rect"></div>
<div class="hex">
<div id="hexagon" >
<div class="semi-cir" ></div>
</div>
</div>
</div>
My CSS:
#hexagon {
width: 100px;
height: 55px;
background: #0088CD;
position: absolute;
border-top: 1px solid #0088CD;
border-bottom: 1px solid #0088CD;
border-radius: 2px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #0088CD;
border-radius: 2px;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #0088CD;
border-radius: 2px;
}
.semi-cir{
position: relative;
left: 10px;
background-color:#00A9F1;
height:100px;
width:100px;
-webkit-border-radius:75px;
-moz-border-radius:75px;
z-index: 1;
overflow: hidden;
}
The overflow: hidden does not have any effects.
Try to give background color as same as it is given to 'semi-cir'.
same trick is applied on link provided by you : https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100
#hexagon {
width: 100px;
height: 55px;
background: #0088CD;
position: absolute;
top:50px;
left:50px;
border-top: 1px solid #0088CD;
border-bottom: 1px solid #0088CD;
border-radius: 2px;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #0088CD;
border-radius: 2px;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #0088CD;
border-radius: 2px;
}
.semi-cir{
position: relative;
left: 10px;
background-color:#00A9F1;
height:100px;
width:100px;
-webkit-border-radius:75px;
-moz-border-radius:75px;
z-index: 1;
overflow: hidden;
}
.radius-rect{
height:200px;
background:#00a9f1;
}
<div class="container">
<div class="radius-rect"></div>
<div class="hex">
<div id="hexagon" >
<div class="semi-cir" ></div>
</div>
</div>
</div>
See the definition of the overflow property by MDN:
The overflow CSS property specifies whether to clip content, show scrollbars, or display overflowing content when it is too large for its block-level container.
(...)
hidden: Content is clipped if necessary to fit the content box. No scrollbars are provided.
The content of the element is clipped. Properties like background, border are part of the elements so are not clipped. You would have to apply overflow: hidden on the parent (#hexagon) to hide what is exceeding of the childreen (.semi-cir).
However, I do not know what you are thing to render precisely. If you simply want a "semi-circle" like the class name suggest, you can wrap your full circle in a parent with overflow just big enough to hide one of its half.
If you make like the circle is inside the hexagon with a non-linear separation, you can stack several of the "circles parts" described above.
But all of this is definitively over-engineered, and overflow is not the right property for that. You can take a look at the clip and clip-path properties that were made for this usecase.
The clip CSS property defines what portion of an element is visible. The clip property applies only to absolutely positioned elements, that is elements with position:absolute or position:fixed.
-- https://developer.mozilla.org/en/docs/Web/CSS/clip
The clip-path CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed i.e, only a specific region of the element is displayed. The clipping region is a path specified as a URL referencing an inline or external SVG, or shape method such as circle(). The clip-path property replaces the now deprecated clip property.
-- https://developer.mozilla.org/en/docs/Web/CSS/clip-path
Here are some great article about it:
https://css-tricks.com/clipping-masking-css/
https://www.html5rocks.com/en/tutorials/masking/adobe/
However, be careful of the browser support. clip is deprecated and clip-path is not supported by IE and Edge.
This question already has answers here:
Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)
(4 answers)
Closed 7 years ago.
I have multiple boxes (items) with an item number and a description. I want to vertical align my item number regardless of the description height (using only HTML and CSS).
See this image for more info:
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder</div>
</div>
As you can see I have multiple boxes and the description text can have different lengths, so I can't absolute position my item number relative to the top.
Any one got any suggestions on how to achieve this?
you should position your number absolutely in order to achieve this. You could also minimalize markup by using a pseudo element, allowing you to do this with a single element.
I have also used a data-attr in order to allow you to dynamically alter the number within the div if you so wish.
Something like:
div {
width: 200px;
border: 5px solid lightgray;
box-shadow: 5px 5px 10px dimgray;
margin: 20px;
padding: 20px;
padding-left: 30px;
position: relative;
}
div:before {
content: attr(data-pointNum);
position: absolute;
top: 50%;
left: -5px;
box-sizing: border-box;
height: 40px;
width: 40px;
transform: translate(-50%, -50%);
text-align: center;
line-height: 30px;
border-radius: 50%;
border: 5px solid tomato;
background: white;
box-shadow: 5px 5px 10px dimgray;
}
<div data-pointNum="1">some text</div>
<div data-pointNum="2">some moretext
<br/>spanning multiple
<br/>lines</div>
Demo: http://jsfiddle.net/UI_Designer/xzmzpL4g/1/
.item{
border:1px solid #000;
padding:20px;
margin-left:20px;
position:relative;
margin-bottom:20px;
}
.item-number{
position: absolute;
left:-10px;
width:20px;
height:20px;
border:1px solid #ccc;
border-radius:50%;
text-align:center;
background:#FFF;
top: 40%;
transform: translate(-20%,0);
}
you can try this
$(document).ready(function() {
$('.item-number').css('top', ($('.item').height() / 2) + 'px');
});
.item-description {} .item {
border: 1px solid #000;
width: 150px;
padding-left: 20px;
}
.item-number {
position: absolute;
left: 5px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder Text placeholder Text placeholder Text placeholder</div>
</div>
and this is demo
https://jsfiddle.net/0xf5hvej/
of course you will need more styling to achieve what you need but this is the basic