How to use Clip-path to produce some tremendous effects

In this article,we are going to make a div which includes some kind of random text and we produce effect on that div by using clip-path.

App.js file is displayed below:

1import React from "react"
2import './styles.css'
3export default class App extends React.Component {
4  render() {
5    return <div>
6    <div className="contain">
7      <div className="inner">{/* <span className="">i</span> */}</div>
8      <h1>Hi</h1>
9      <p>
10        This is paragraph for you. HTML is not progarming language.This is
11        paragraph for you. HTML is not progarming language
12      </p>
13    </div>
14  </div>;
15  }
16}

Styles.css file is displayed below

1
2.contain {
3  width: 30%;
4  margin-left: auto;
5  margin-right: auto;
6  border-radius: 10px;
7  background-color: white;
8  position: relative;
9}
10.contain h1,
11p {
12  margin-left: 10px;
13}
14.inner {
15  position: absolute;
16  background-color: turquoise;
17  padding: 1em;
18  border-radius: 10px;
19  width: 100%;
20  height: 100%;
21  top: 0;
22  clip-path: inset(0% 98% 0% 0%);
23  transition: all 0.5s ease-in-out;
24  cursor: pointer;
25}
26
27.contain:hover .inner,
28h1,
29p {
30  clip-path: inset(0% 0% 0% 0%);
31}

Here is the link of live example which we done so far:
Click here

How to create stylish info card with clip-path

In this article,we are going to make a div which includes some kind of random text and we produce effect on that div by using clip-path.

App.js file is displayed below:

1import "./styles.css";
2export default function App() {
3  return (
4    <div className="App">
5      <h1>Hello CodeSandbox</h1>
6      <div>
7      <div className="contain">
8        <div className="inner">
9          <span className="">i</span>
10          <h1>Hi</h1>
11        <p>
12          This is paragraph for you. HTML is not progarming language.This is
13          paragraph for you. HTML is not progarming language
14        </p>
15        </div>
16      
17      </div>
18    </div>
19    </div>
20  );
21}

Styles.css file is displayed below

1
2 .contain {
3  width: 30%;
4  margin-left: auto;
5  margin-right: auto;
6  border-radius: 10px;
7  background-color: white;
8  padding: 10px;
9}
10.inner {
11  background-color: turquoise;
12  width: 100%;
13  border-radius: 10px;
14  padding: 15px;
15  clip-path: circle(10% at 90% 20%);
16  transition: all 0.5s ease-in-out;
17  cursor: pointer;
18}
19.inner:hover {
20  background-color: #00b6ff;
21  clip-path: circle(100%);
22}
23.inner:hover span {
24  color: #00b6ff;
25}
26.inner span {
27  float: right;
28  font-weight: bold;
29  color: white;
30  position: relative;
31  transition: color 0.5s;
32  margin-right: 6%;
33  margin-top: 2%;
34}

Here is the link of live example which we done so far:
Click here