Html 类似指南针或狩猎标志内部的形状

我试图使下面的形状只用CSS。我知道使用图像或SVG实现这个形状要容易得多，但我正试图用CSS实现它，以证明概念

下面是我迄今为止尝试过的代码。它通过使用

变换：旋转（45度）

创建菱形，但对角线的长度相同，而我需要的形状有一条很长的对角线和另一条很短的对角线

.separator{
    background: #555;
    top: 40px;
    padding-top: 0px;
    margin: 0px 40px;    
    height: 100px;
    width: 100px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

是否可以使用CSS创建我需要的形状

注意：A在前面被询问过，由于没有显示任何编码尝试，因此被关闭/删除为“太宽”。发布一个新问题并根据自己的回答。请随意插入其他解决方案（或）编辑问题，使其对未来读者更有用。

对于针尖上的针头 是的，可以仅使用CSS创建该形状。您必须沿Y轴和Z轴旋转形状以实现它

将其沿Z轴旋转45度将产生菱形（如问题所示），并沿Y轴旋转接近（但小于）90度将仅使形状的一部分从前面可见，从而使其具有较短对角线的外观（类似于指南针指针）

另外，为背景添加

线性渐变

和

插入

框阴影

将有助于实现更接近所示形状的形状

正文{
背景：#333；
字体系列：Calibri；
字号：18px；
}
div{
高度：200px；
宽度：150px；
显示：内联块；
垂直对齐：中间对齐；
颜色：白色；
填充顶部：40px；
}
.分离器{
背景:#555；
顶部：40px；
填充顶部：0px；
高度：160px；
宽度：160px；
背景图像：线性梯度（-45度，#555 0%，35540%，35450%，#333 97%；
盒影：插入6px 6px 22px 8px#2727；
变换：旋转（87度）旋转（45度）；
}

当超过宽度时，一些较长的段落内容会缠绕在一起
当超过宽度时，一些较长的段落内容会缠绕在一起

我以后可能不得不使用这个：）