<main>
<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/NASA_seal.svg/272px-NASA_seal.svg.png>
<div><!-- triangle --></div>
<ul>
	<li><a href=#>Home</a>
	<li><a href=#>Projects</a>
	<li><a href=#>Shop</a>
	<li><a href=#>Contact</a>
	<li><a href=#>Media</a>
</ul>
</main>

div{
      width: 0; height: 0;
      --d:  200px;
      border-right: var(--d) solid transparent;
      border-bottom: var(--d) solid transparent;
      border-left: var(--d) solid red;
      float: left;
      shape-outside: polygon(0 0, var(--d) 0, 0 var(--d));
}

ul{
	list-style: none;
	padding-top: 25px;
}

li:not(:first-child){ margin-top: 10px; }

li{
	background: gold;
	padding-left: 50px;
	margin-left: -40px;
}

a:link{
	color: navy;
	font-weight: bold;
	text-decoration: none;
}

main{
 	background: ghostwhite;
	font-family: 'eb garamond';
	margin: auto;
	margin-top: calc(50vh - 200px);
	position: relative;
	width: 385px; height: 400px;
}

img{
	position: absolute;
	left: 10px; top: 10px;
	width: 100px;
}

@media (max-width: 440px){
	main{ transform: scale(.8); }
}