倾斜的div形状

Question

嗨有一个相当愚蠢的问题我想角度我的div 45 degr 没有内容旋转，因为可以看到蓝色是一个具有正确角度的图像。但是div没有，因此它的颜色变化看起来是错误的，因为它没有角度。 我尝试了一些例子，但内容也总是有角度。 我怎么能实现这个目标？ 提前感谢任何建议。

HTML：

       <div class="topnav" id="myTopnav">   
       <a href="#home" class="active">Home</a>    
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction1();">&#9776;</a>
   </div>

CSS：

    .topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transform: skewY(-45deg);
}

Answer 1

你走了。三角形的大小由边框设置决定。只需在代码中的a.about之后插入此元素即可。

#triangle {
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-right: 100px solid transparent;
}
	

<div id="triangle"></div>

这是每个方向的设置：

top-left: border-top and border-right
top-right: border-top and border-left
bottom-left: border-bottom and border-right
bottom-right: border-bottom and border-left