Drawing A Triangle With CSS(Cadcading style sheet)

HTML-CSS
1

FB_IMG_15488737575110079

I have been Trying to Replicate This Design In a Very Long Time Please Any Help.
I tried Drawing A Triangle But I didn’t get it.
This is the code below

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>

<link rel=“stylesheet” href=“CSS/triangle.css”>

<title>Document</title>

<style>

.arrow-down {

width: 0;

height: 70%;

border-left: 150px solid transparent;

border-right: 0px solid transparent;

border-top: 150px solid #10706c;

position: relative;

left:320px;

bottom:20px;

}

.col-right{

float: left;

width: 30%;

height: 100px;

background-color: #97a09f;

margin-top: 70px;

clip-path: inset(round 20%);

}

</style>

</head>

<div class=“col-head”>

<P>UPCOMING EVENTS</P>

</div>

<div class=“col-right”>

<div class=“arrow-down”>

</div>

</div>

</body>

</html>

Thanks In Advance!

2

What have you tried to do?
If you post your code we can see how to help you in moving it toward your goal

3

Thanks
Look AT them below
<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>

<link rel=“stylesheet” href=“CSS/triangle.css”>

<title>Document</title>

<style>

.arrow-down {

width: 0;

height: 70%;

border-left: 150px solid transparent;

border-right: 0px solid transparent;

border-top: 150px solid #10706c;

position: relative;

left:320px;

bottom:20px;

}

.col-right{

float: left;

width: 30%;

height: 100px;

background-color: #97a09f;

margin-top: 70px;

clip-path: inset(round 20%);

}

</style>

</head>

<div class=“col-head”>

<P>UPCOMING EVENTS</P>

</div>

<div class=“col-right”>

<div class=“arrow-down”>

</div>

</div>

</body>

</html>

4

This might help:

Capture

1 Like
5

Thanks so Much.
I am very grateful

1 Like
6

Hey don’t forget to mark the right comment as solved to mark the post as solved man :smiley: