i am using a viewbag to show a drop down in view .. now when my post method is complete it returns back to view which then throws exception for dropdown because my view bag has nothing after that . 

```
[HttpGet]
public ActionResult Add(string id)
{
    List<req> objlist = new List<req>();
    objlist = Getlist(Id);
    ViewBag.List = objlist;
    TempData["tempList"] = ViewBag.List;
    return View();
}

```

Above is my Get method and for POST method can i do this 

```
[HttpPost]
public ActionResult Add()
{
    ViewBag.List =  TempData["tempList"];
    return View();
}

```

All this because i dont want Run the SQL Call again .
['https://Stackoverflow.com/questions/54141802', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/10250043/']
Here is an example combining transform and some gradient:

```css
.CD {
  width: 200px;
  height: 200px;
  margin: auto;
  background: 
   linear-gradient(to bottom, #000 0, 
    #000 calc(50% - 20px), transparent calc(50% - 20px), 
    transparent calc(50% + 20px), #000 calc(50% + 20px)) 
   center/3px 100%, 
   linear-gradient(to right, #000 0, 
    #000 calc(50% - 20px), transparent calc(50% - 20px), 
    transparent calc(50% + 20px), #000 calc(50% + 20px)) 
   center/100% 3px, 
   radial-gradient(circle at center, transparent 20px, #000 21px, #000 23px, grey 24px);
  background-repeat: no-repeat;
  border: 2px solid;
  border-radius: 100%;
  position: relative;
  transform: perspective(350px) rotateX(65deg);
}
.CD::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  background-size: 3px 100%, 100% 3px, 0 0;
  border-radius: inherit;
  transform: rotate(45deg);
}
.bar {
  width: 20px;
  height: 74px;
  margin: 25px auto -112px;
  z-index: 1;
  position: relative;
  border-radius: 4px 4px 8px 8px;
  background: #000;
}
.middle {
  height: 110px;
  width: 212px;
  background: 
   linear-gradient(#000,#000) calc(100% - 18px) 10px/3px 50%,
   linear-gradient(#000,#000) 18px 10px/3px 50%,
   linear-gradient(#000,#000) center/4px 50%,
   linear-gradient(#000,#000) top right/3px 50%,
   linear-gradient(#000,#000) top left/3px 50%,
   radial-gradient(85% 100% at top center, 
    red 75%,#000 76%,
    #000 calc(76% + 3px) ,transparent calc(76% + 4px));
  background-repeat:no-repeat;
  margin: -90px auto 0;
}
.bottom {
  height: 110px;
  width: 212px;
  background: 
   linear-gradient(#000,#000) top right/3px 50%,
   linear-gradient(#000,#000) top left/3px 50%,
   radial-gradient(85% 100% at top center, 
    green 75%,#000 76%,
    #000 calc(76% + 3px) ,transparent calc(76% + 4px));
  background-repeat:no-repeat;
  margin: -70px auto;
  position: relative;
  z-index: -1;
}
```

```html
<div class="bar"></div>
<div class="CD"></div>
<div class="middle"></div>
<div class="bottom"></div>
```

And here is with tabs:

```css
.CD {
  width: 200px;
  height: 200px;
  margin: auto;
  background: 
   linear-gradient(to bottom, #000 0, 
    #000 calc(50% - 20px), transparent calc(50% - 20px), 
    transparent calc(50% + 20px), #000 calc(50% + 20px)) 
   center/3px 100%, 
   linear-gradient(to right, #000 0, 
    #000 calc(50% - 20px), transparent calc(50% - 20px), 
    transparent calc(50% + 20px), #000 calc(50% + 20px)) 
   center/100% 3px, 
   radial-gradient(circle at center, transparent 20px, #000 21px, #000 23px, grey 24px);
  background-repeat: no-repeat;
  border: 2px solid;
  border-radius: 100%;
  position: relative;
  transform: perspective(350px) rotateX(65deg);
  z-index:1;
}
.CD::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  background-size: 3px 100%, 100% 3px, 0 0;
  border-radius: inherit;
  transform: rotate(45deg);
}
.bar {
  width: 20px;
  height: 74px;
  margin: 25px auto -112px;
  z-index: 2;
  position: relative;
  border-radius: 4px 4px 8px 8px;
  background: #000;
}
.middle {
  height: 110px;
  width: 212px;
  background: 
   linear-gradient(#000,#000) calc(100% - 18px) 10px/3px 50%,
   linear-gradient(#000,#000) 18px 10px/3px 50%,
   linear-gradient(#000,#000) center/4px 50%,
   linear-gradient(#000,#000) top right/3px 50%,
   linear-gradient(#000,#000) top left/3px 50%,
   radial-gradient(85% 100% at top center, 
    red 75%,#000 76%,
    #000 calc(76% + 3px) ,transparent calc(76% + 4px));
  background-repeat:no-repeat;
  margin: -90px auto 0;
  display:flex;
}
.bottom {
  height: 110px;
  width: 212px;
  background: 
   linear-gradient(#000,#000) top right/3px 50%,
   linear-gradient(#000,#000) top left/3px 50%,
   radial-gradient(85% 100% at top center, 
    green 75%,#000 76%,
    #000 calc(76% + 3px) ,transparent calc(76% + 4px));
  background-repeat:no-repeat;
  margin: -70px auto;
  position: relative;
  z-index: -1;
}

.middle > span:first-child,
.middle > span:last-child{
  height: 63px;
  width: 15px;
  margin:0 3px;
}
.middle > span:nth-child(2),
.middle > span:nth-child(3){
  flex-grow:1;
  height:83px;
}
.middle > span:first-child {
  border-radius: 0 0 0 24px;
  background: pink;
}
.middle > span:last-child {
  border-radius: 0 0 24px 0;
  background: orange;
}
.middle > span:nth-child(2) {
  margin-right: 2px;
  border-radius: 0 0 0 86px/0 0 0 24px;
  background:blue;
}
.middle > span:nth-child(3) {
  margin-left: 2px;
  border-radius: 0 0 86px 0/0 0 24px 0;
  background:purple;
}
.middle > span {
  cursor:pointer;
}
.middle > span:hover {
  filter:brightness(50%);
}
```

```html
<div class="bar"></div>
<div class="CD"></div>
<div class="middle">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="bottom"></div>
```
You could create a vectorized image in Illustrator and then transform it to SVG code for HTML. 

Examples with SVG: <https://www.w3schools.com/graphics/svg_examples.asp>

A practical guide here: <https://svgontheweb.com/>

Inspiration: <https://www.awwwards.com/websites/svg/>