Develop Reference

I want to draw a moving line that will fill all 4 sides of a text in 2 seconds with css, but it didn't work, how can I do it?

Case 1
Case 2
This way it goes all the way to the end of the article. I managed to do it horizontally, but I couldn't manage to make all 4 sides. Is there anyone who can help?
I planned to make a line that fills all 4 sides of the text in 2 seconds, but I was only able to make horizontal down and up. I couldn't make the right and left edges
the code is like tenter code herehis
#hayati::before {
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 2px;
box-shadow: 2px 2px 2px;
transition: 2s;
background-color: rgb(111, 241, 71);}
#hayati:hover::before {
box-shadow: 2px 2px 2px;
width: 100%;
}
#hayati::after {
content: "";
position: absolute;
right: 0;
top: -4px;
width: 0;
height: 2px;
transition: width 1.5s ease-out;
box-shadow: 2px 2px 2px;
background-color: rgb(111, 241, 71);
}
#hayati:hover::after {
width: 100%;
}

how to ovelap a image on other image by styling scss in reactjs?

I have a design. In this design, one is overlapping on another image. I have created some code to try as given in the design. but it's not working for me. Click here to find the design
Below is some line of code of components. that is tried by me
<div className="container">
<Image className="container-img1" src={img1}/>
<Image className="container-img2" src={img2}/>
</div>
below is a style in scss
.container{
text-align: center;
.container-img1{
position: inherit;
left: 0;
top: 0;
height: auto;
border-radius: 50%;
border: 3px solid grey;
margin-right: -5rem;
}
.container-img1{
position: inherit;
left: 0;
top: 0;
height: auto;
border-radius: 50%;
border: 3px solid grey;
margin-left: -5rem;
}
}
Click Here to check what I have designed. but it's not looking as given in design.
How can I style the same as given in Design? And should be responsive also.

To achieve the demo image you can eliminate the border with transparency for the img2 that has higher stack order in DOM.
.container-img1 {
position: inherit;
left: 0;
top: 0;
height: 7rem;
border-radius: 50%;
border: 3px solid grey;
/* Reduce the margin so that the border aligns properly */
margin-right: -1.1rem;
}
.container-img2 {
position: inherit;
left: 0;
top: 0;
height: 7rem;
border-radius: 50%;
border: 3px solid grey;
/* Reduce the margin so that the border aligns properly */
margin-left: -1.1rem;
/* make it transparent */
border-left-color: transparent;
}
To make it responsive, the image width seems very small but you need to adjust the width & margin according to the device size using media query.

How to resize tooltip in css

Trying to customize tooltips I created. I would like the tooltip to appear right below the hover text, to be responsive and most importantly to make the text multiline. By this I mean when I want my tooltip to instead of spreading horizontally to spread vertically.
So adjusting the width of the text, the longer the text the longer the vertical size of the container as opposed to the text flowing horizontally.
This is what I have tried thus far:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
color: black;
}
.tooltip:hover {
text-decoration: none;
}
[data-title]::after {
content: attr(data-title);
background: rgba(0, 0, 0, 0.2);
color: #111;
-website-transform: translateY(50%) translateX(-55%);
transform: translateY(50%) translateX(-55%);
word-wrap: break-word;
height: 350px;
position: absolute;
padding: 1px 5px 2px 5px;
bottom: -2.6em;
left: 0%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 20;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
<p>Words words <a class="tooltip" data-title="Title text.">link text</a> words.
More words <a class="tooltip" data-title="More link text.">more link text</a>.</p>

You can try this-
[data-title]:after {
content: attr(data-title);
background: rgba(0,0,0,.9);
color: #fff;
word-wrap: break-word;
height: auto;
width: 100px;
position: absolute;
padding: 1px 5px 2px 5px;
top: 18px;
left: 0;
word-break: break-all;
box-shadow: 1px 1px 3px #222222;
opacity: 20;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
.tooltip {
color: blue;
position: relative;
cursor: pointer;
}
[data-title]:hover::after{
visibility: visible;
}
We would start off by collecting our data. The collection method will vary depending on what sources we are using. After this process we would then proceed to <a class="tooltip" data-title="The train_test_split function in sklearn splits the dataset into training and test data randomly. You can manually set the test_size option to define the proportion of the dataset to be included in both the test and training splits, by default this value is 0.25 meaning the training set will contain 75% of the data while the test set contains 25% of the data.">split the data</a> into two sets; training and test data. We use the training data to train our model and the test data to <a class="tooltip" data-title="We split the data into training and test data because we want our model to generalize to data it has not been exposed to">test its performance</a>.
Note: For the better performance you have to use javascript for tooltip placement, Auto placement adjustment etc.

creating a corner button div

I am looking to make a triangle button in the top-right of my website (fixed position). It's just a icon over top of a background colour with hover effect. I was wondering if there is a way to get a angled div or if it needs to be a background image?
CSS
#top-btn {
position: fixed;
top: 0;
right: 0;
background-color: red;
}
HTML
...
<div id="top-btn">icon</div>
EDIT - visual representation. positioned top right of window

Updated for triangle on right with rotated text
Use the border trick to create a triangle in CSS: DEMO
HTML:
<div id="corner-triangle">
<div class="corner-triangle-text"><span class="corner-triangle-firstline">Free</span><br>Shipping!</div>
</div>
CSS - note comments for adjusting triangle size and color; also, remove transform: rotate(45) lines if you don't want the text rotated:
div#corner-triangle {
display: block;
width: 100px;
height: 100px;
border-style: solid;
border-width: 0 200px 200px 0; /* adjust for size of triangle */
border-color: transparent #da0039 transparent transparent; /* adjust for color of triangle */
position: fixed;
top: 0;
right: 0;
z-index: 99999;
color: white;
text-shadow: 0 0 25px 9px #fff;
-webkit-filter: drop-shadow(0 1px 9px #000000);
filter: drop-shadow(0 1px 9px #000000);
}
div#corner-triangle .corner-triangle-text {
position: relative;
font-size: 2.1em;
top: 0;
right: -90px;
font-family: sans-serif, "Helvetica Neue", Helvetica, Arial;
font-weight: 200;
line-height: 1.1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
div#corner-triangle .corner-triangle-text span.corner-triangle-firstline {
margin-left: 29px;
}
div#corner-triangle .corner-triangle-text a {
color: white;
}
div#corner-triangle .corner-triangle-text a:hover,
div#corner-triangle .corner-triangle-text a:link,
div#corner-triangle .corner-triangle-text a:visited,
div#corner-triangle .corner-triangle-text a:active,
div#corner-triangle .corner-triangle-text a:focus {
text-decoration: none;
}

Basically, you create an element with width and height of zero, and use borders to create the triangles.
[]
This article shares some code.
https://css-tricks.com/snippets/css/css-triangle/
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

.triangle {
border-width: 50px;
border-style: solid;
border-color: red red transparent transparent;
position: fixed;
top:0;
right:0;
width:0;
height:0;
}
Working fiddle.

If you're asking how to make a triangle without using an image, there's these html characters: ▲ ▲ and ▼ ▼
You can also make triangles in css by making an element with a width and height of zero, and giving it a border on only 3 sides, with 2 sides being transparent.
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
More detail here
https://css-tricks.com/snippets/css/css-triangle/

This is what I came up with:
.corner{
width: 0;
height: 0;
border-top: 50px solid rgb(227, 37, 37);
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right:50px solid rgb(227, 37, 37);
float:right;
}
.corner:hover{
border-color: #A00404 #A00404 transparent transparent;
transition: border-color 1s;
}
Here is the JSfiddle demo

Depending on what you need to do with it, the easy way would be to use a character like the following: ▴
You cannot just copy and paste it though. Use the following in your code to display this character:
▴
It may not suit every situation, but I've used it. It's as easy to place as any other text, and you can easily resize it, apply colour, background, or shadow to it, because it's just text.
Here's a list of all the characters you can use, depending of course on the font you're using, which will be a limitation of this method I think:
http://dev.w3.org/html5/html-author/charref
Another limitation would be if you want to place text or an icon on top of it. I'm sure it's possible, but there are better methods if that's your intention.

Create a trapezoid that has transparent borders and background?

I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。

Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):

You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.