I'm trying to fill an element with multiple colors using CSS. Currently, I have this CSS:
div.container {
width: 100px;
border: 1px dotted;
font-size: 10px;
}
.box {
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
}
fiddle
Problem is that the contents are not over the border, so it looks like this:
How can I get the contents of span class="box" to stay in the middle of the element (i.e. over the colored circle)?
How about using absolute and relative positions, and making the circle as a pseudo element.
DEMO: http://jsfiddle.net/d0cv4bc8/8/
div.container {
width: 100px;
border: 1px dotted;
font-size: 12px;
}
.box {
position: relative;
}
.box::before {
content: "";
box-sizing:border-box;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 6px solid #99FF99;
border-bottom-color: #FF9966;
border-right-color: #FF9966;
position: absolute;
z-index: -1;
}
Only way I can get the contents centered vertically and horizontally is to put contents inside a span, moved left and up by half of box's border width.
http://jsfiddle.net/d0cv4bc8/11/
CSS
.box .contents {
display:inline-block;
position: relative;
left: -3px;
top: -3px;
}
HTML
<div class="container">
<span class="box"><span class="contents">1</span></span>
</div>
Related
This question already has an answer here:
How to do an inset border with a border radius on an image
(1 answer)
Closed 1 year ago.
I am trying to get a white border within the photo. Currently I have tried everything and come closest to the intended result with outline, only it is not possible to round it off.
Anyone have a solution for this?
It's about the fine white line, which would only need to be rounded off.
Code:
img {
outline: 1px solid white;
outline-offset: -10px;
}
Use a pseudo-element on top of your image.
img {
height: 75vh;
width: auto;
border-radius: 1rem;
display: block;
z-index: -1;
position: relative;
}
div {
display: inline-block;
margin: 1em;
position: relative;
}
div:after {
content: "";
position: absolute;
inset: 5px;
border: 2px solid white;
border-radius: 14px;
}
<div>
<img src="https://images.unsplash.com/photo-1625516838246-ff33acad73ec?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyODAwMTMzNQ&ixlib=rb-1.2.1&q=85" alt="">
</div>
You can use two div blocks. External - as a container, with background image (or with img tag), and internal for line. It's a little bit verbose way, but very flexible
.external {
width: 100px;
height: 100px;
background-image: url('https://picsum.photos/536/354');
background-size: cover;
text-align: center;
position: relative;
border: 1px black solid;
border-radius: 15px;
}
.internal {
border-radius: 5px;
border: 1px red solid;
width: calc(90% - 2px);
height: calc(90% - 2px);
position: absolute;
top: 5%;
left: 5%;
}
<div class="external">
<div class="internal"></div>
</div>
I need to draw an arrow, preferably using pseudo (:after or :before) elements. it is supposed to look like this:
But it looks like this:
This is my code:
HTML:
<div class="info">
<p>Learn about our technology<span class="arrow-right"></p></span></div>
CSS:
.arrow-right:after{
content: "";
display:inline-block!important;
width:0;
height:0;
border-left:14px solid #C8A962;
border-top:14px solid transparent;
border-bottom: 14px solid transparent;
}
Well of course it looks like that because you use a code just for the triangle part of the arrow.
You need to add the other part also. You can do that with the other pseudo-element before.
You can change and adjust 'width' 'height' 'color' and so on.
.arrow-right:after {
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 8px solid #C8A962;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
vertical-align: middle;
}
.arrow-right:before {
width: 20px;
height: 2px;
background: #C8A962;
content: "";
display: inline-block;
vertical-align: middle;
}
<div class="info"><a href="http://www.bay42.io" class="arrow1">
Learn about our technology<span class="arrow-right"></span>
</a></div>
You can try using arrow html code → for this purpose
<div class="info">
<p>Learn about our technology<span>→</span><p></p></div>
Looks like my comment got lost
You can use the character → . See : https://dev.w3.org/html5/html-author/charref you'll find the character entities that you need. for a pseudo, use content:"\2192"; + font-size to scale it
.arrow1::after {
content: '\2192';
/* little make up */
font-size: 2em;
/* whatever needed*/
padding: 0 0.5em;
/* whatever needed*/
vertical-align: -0.1em;
/* whatever needed*/
}
a {
text-decoration: none;
float:left;
clear:both
}
.arrow1:nth-child(2)::after {
content: '\21fe';
display:inline-block;
transform:scale(2,1);
}
.arrow1:nth-child(3)::after {
content: '\21d2';
display:inline-block;
transform:scale(2,0.8);
}
Learn about our technology
Another one stretched
or that one can be used and stretched too
p {
position: relative;
width: max-content;
}
.arrow-right:after {
top: 50%;
right: -50px;
position: absolute;
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 14px solid black;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
transform: translateY(-50%) scale(0.4);
}
.arrow-right:before {
content: "";
width: 25px;
height: 1px;
background: black;
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
}
Try this. Change the colour to white.
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 2 years ago.
I'm trying to create a border on a div with two different color on the top left and the bottom right.
Can't find solution, with images or directly on css.
Please refer the below example.
You can use position set toabsolute for the two red sections and they can be positioned with respect to the div with class box, which has its position set to relative.
.box {
background-color: gray;
height: 400px;
width: 400px;
position: relative;
}
.top-left {
position: absolute;
top: 10px;
left: 10px;
border-left: 10px solid darkblue;
border-top: 10px solid darkblue;
height: 30px;
width: 30px;
}
.bottom-right {
position: absolute;
bottom: 10px;
right: 10px;
border-bottom: 10px solid red;
border-right: 10px solid red;
height: 30px;
width: 30px;
}
<div class="box">
<div class="top-left"></div>
<div class="bottom-right"></div>
</div>
You can follow the example of Naren Murali or you can create pseudo-elements, so you do not need as much HTML.
I created two pseudo-elements :before and :after
:before
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
:after
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background: grey;
}
div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 5px;
left: 5px;
border-top: 5px solid blue;
border-left: 5px solid blue;
}
div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
right: 5px;
border-bottom: 5px solid red;
border-right: 5px solid red;
}
<div></div>
No need extra elements or pseudo elements, you can do easily with multiple background:
.box {
height: 200px;
width: 400px;
background:
linear-gradient(red,red) 0 0,
linear-gradient(red,red) 0 0,
linear-gradient(blue,blue) 100% 100%,
linear-gradient(blue,blue) 100% 100%,
#ccc;
padding:5px;
background-size:80px 20px,20px 80px;
background-origin:content-box;
background-repeat:no-repeat;
}
<div class="box">
</div>
I am trying to create a div with arrow on left and right. No background, only border. Something like this:
I am able to create similar div with filled background color using ::before and ::after tags. However, only borders is something i am not able to achieve. Can it be done with css only?
https://jsfiddle.net/1g16x8p7/1/
html:
<div class="wizard">
<a class="item">
</a>
</div>
css:
.item {
display: inline-block;
padding: 15px;
padding-left: 25px;
/*default styles*/
background-color: green;
position: relative;
}
.item:before,
.item:after {
content: "";
height: 0;
width: 0;
border-width: 15px 0 15px 10px;
border-style: solid;
position: absolute;
left: 100%;
top: 0;
}
.item:before {
border-color: transparent transparent transparent white;
left: 0;
}
.item:after {
border-color: transparent transparent transparent green;
}
You can use ::before and ::after with borders on two adjacent sides (e.g. top and right) and then transform: rotate and position: absolute them to create the left and right parts, e.g.
<div class="arrow"></div>
.arrow {
height: 75px;
width: 200px;
border-top: 4px solid black;
border-bottom: 4px solid black;
position: relative;
}
.arrow::before, .arrow::after {
content: "";
border-top: 4px solid black;
border-right: 4px solid black;
height: 55px;
width: 55px;
position: absolute;
transform: rotate(45deg);
}
.arrow::before {
top: 8px;
left: -30px;
}
.arrow::after {
top: 8px;
right: -30px;
}
Here's an example.
I am working on kind of a popup. Its structure is very simple and is as follows:
<div class = "popup">
<div class = "upper">
<img src = "http://www.tapeta-mis-galazki-koala.na-pulpit.com/pokaz_obrazek.php?adres=mis-galazki-koala&rozdzielczosc=128x128" />
</div>
<div class = "description">This is a very interesting description of what you can see above.</div>
</div>
with styles of
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
display: inline-block;
}
.popup .upper img {
display: block;
}
and here is a fiddle with the code applied.
As you can see, the div.popup is positioned as fixed to the body.
What I want to achieve is to make the div.description NOT extend its parent div.popup width when it contains much text, instead it should wrap the text to be multilined and be of width of the div.popup. The div.popup width should be determined by the div.upper width and its content. In other words I mean to have div.description's width AT MOST of the div.upper's width, regardless to its (div.description text content).
EDIT
There's this little difficulty: the image content is not static and may be dynamically changed so the width is not constant.
Is that even possible to achieve that with CSS?
http://jsfiddle.net/de6fr/1/ - a basic example of how to fix
You're basically using popup as a container, which means that if you want to retain its width, that's what you have to work on. I used the max-width property with .popup like this:
.popup {
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
display: table;
width: 1px;
}
.popup > div {
display: table-row;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
}
.popup .upper img {
display: block;
}
Update - Flexible
http://jsfiddle.net/de6fr/4/
The fix for making it flexible is to use a CSS hack, which basically changes the nature of the element to a table
The nature of CSS (cascading style sheets) means that it's pretty hard to get a parent DIV to take the size of a child div without some crazy ideas involved. However, there's nothing preventing a "table" with a really small width doing that, as per this code:
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
display: table;
width: 1px;
}
.popup .upper {
min-width: 100px;
min-height: 100px;
border: 1px solid;
padding: 5px;
display: table-row;
}
.popup .upper img {
display: block;
}
.popup .description {
display: table-row;
}
You have not defined the width for fixed element so add some width to your fiexed element
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
width: 100%;
}
here is the demo
Add a CSS property to your popup class and Give it a width
.popup
{
position: fixed;
left: 50px;
top: 50px;
border: 1px solid;
background: #fff;
padding: 10px;
box-shadow: 0 0 5px #000;
overflow:scroll;
width:400px;
}