Color edge of a polygon with css-CodePudding

I want to outline (2px high) ONLY the top, shaped part of this polygon with the color blue. What is the most effective way to achieve this?

.graph {
    clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
    border:none;
    height:200px;
    width:100%;
    background:red;
    position:absolute;
    bottom: 0;
}

<body>
       <div ></div>
  
</body>

CodePudding user response：

This might not be the best solution but worth a try.

.graph {
    clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
    border:none;
    height:200px;
    width:100%;
    background:red;
    position:absolute;
    bottom: 0;
}

.graph::before {
  content: "";
  clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
  border: none;
  height: 200px;
  width: 100%;
  background: white;
  position: absolute;
  bottom: -5px;
}

body{
 overflow-y:hidden;
}

<body>
       <div ></div>
</body>

CodePudding user response：

Add more points to create only the line. You can introduce a variable to control the thickness:

.graph {
  --b: 5px; /* the thickness */
  
  height: 200px;
  bottom:0;
  left:0;
  right:0;
  position: absolute;
  background :red;
  clip-path: polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%,100% calc(20%   var(--b)),88% calc(40%   var(--b)),69% calc(30%   var(--b)),56% calc(60%   var(--b)),32% calc(77%   var(--b)),9% calc(67%   var(--b)),0 calc(78%   var(--b)))
}

body {
  background: grey;
}

<div ></div>