JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Градиент</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style3.css" />
</head>
<body>
<div id="wrapper">
<div id="inner">
<div id="header">
Заголовок <div id="triangle"></div>
</div>
<div id="content">
Содержимое
</div>
</div>
</div>
</body>
</html>
CSS
html, body, div{
margin:0;
padding:0;
background: transparent;
outline: 0;
border: 0;
font-family: sans-serif;
}
body{
background-color: #FFF;
}
#wrapper{
margin: 10px;
padding: 10px;
border: 2px solid #004C3B;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(91,146,108,0.6)),
color-stop(1, rgb(97,203,178,0.6))
);
background: -moz-linear-gradient(
center bottom,
rgba(91,146,108,0.6) 0%,
rgba(97,203,178,0.6) 100%
);
border: 1px solid #000;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#inner{
background: transparent;
}
#header{
padding: 8px;
border: 1px solid #000;
border-bottom: 0;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.3, rgb(255,187,0)),
color-stop(1, rgb(255,217,0))
);
background: -moz-linear-gradient(
center bottom,
rgb(255,187,0) 30%,
rgb(255,217,0) 100%
);
}
#content{
background-color: #FFF;
border: 1px solid #000;
border-top: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
padding: 10px;
font-size: 0.9em;
}