Html 将模拟下边框应用于旋转的div

我目前正在使用CSS3

rotate

值为模式框提供箭头的外观。我现在需要创建一个带有底部边框的完整箭头。由于这只是一个以45°角旋转的div，因此将另一个

边框

应用于两侧都无法解决问题

我的第一个想法是对div的

：在
伪选择器之后应用一些样式，并将其垂直居中。由于某种原因，尽管它继承了旋转值。我尝试将该值设置为
none
，并尝试手动调整旋转角度，但没有效果。你知道如何让这个边框水平复位吗

根据Harry的建议，我将
：后
选择器的角度设置为
-45度
，
顶部
值设置为
50%
。现在唯一的问题是它没有完全扩展到div的左侧和右侧。有什么想法吗


.arrow{
背景色：透明；
边框顶部：2个实心#C7C7；
左边框：2px实心#c7c7c7；
位置：相对位置；
高度：18px；
宽度：18px；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
.阿罗：之后{
内容：“；
背景：#c7c7c7；
显示：内联块；
位置：绝对位置；
最高：50%；
高度：2倍；
宽度：100%；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}
使用CSS转换：

您可以使用下面代码段中采用的方法创建具有底部边框的完整箭头。这里，箭头是由
：after
元素创建的，而底部的行是使用父容器创建的。使用相同的父级和子级
变换原点固定旋转轴

使用这种方法创建的形状应该能够适应所有尺寸，而不需要对定位进行任何调整（将箭头悬停在代码段中以查看其实际操作）


.arrow{
位置：相对位置；
高度：25px；
宽度：25px；
边框底部：2个实心#c7c7c7；
}
.阿罗：之后{
位置：绝对位置；
内容：“；
底部：-1px；/*边框顶部的一半*/
左：-2px；/*等于左边框*/
高度：计算（100%/1.414）；/*除以1.414，因为父项必须更大*/
宽度：钙（100%/1.414）；
边框顶部：2个实心#C7C7；
左边框：2px实心#c7c7c7；
变换原点：左下角；
变换：旋转（45度）；
}
/*只是为了演示*/
.arrow{转换：所有1；}
.箭头：悬停{高度：50px；宽度：50px；}
子对象将始终继承父对象的变换。您必须在child上反转变换，而不是
none
（也就是说，
旋转（-45度）
，以使其笔直）。您的意思是什么，还是不是什么？看到你的编辑，这显然不是你想要的。o_O@Harry这就理顺了它，但现在它似乎没有完全扩展到div的左右。我已经更新了我的代码示例，让您看看我在说什么。对于宽度，您必须使用毕达哥拉斯定理。使用宽度：计算（100%*1.414）
（2的平方根）。因为要旋转父对象以形成三角形，所以宽度必须等于三角形的斜边，斜边就是sqrt（18^2+18^2）。（总体
top:calc（50%-1px）；left:-4px；height:2px；width:calc（100%*1.414）；
应该可以帮助您完全适应它）。我认为这将使它适当扩展，但左侧对齐已关闭。有没有任何方法可以动态地左对齐边框，而不必轻推和猜测它应该是什么？嘿，我想用你最新的编辑。底部边界有一些奇怪的东西。悬停时它会变厚，看起来有锯齿。这是正确的@CarlEdwards这就是我想要说明的，最后一个不应该用于固定宽度形状以外的任何东西。前两个是最好的：）希望这两个中的一个对你有帮助。哦，那是我的错。我向下滚动太快，没有注意到昨天的第一个解决方案仍然存在。也很抱歉耽搁了。昨天我被一些事情缠住了，这些事情使我无法详细地看答案。非常感谢你的帮助@爱德华兹：这不是问题。我很高兴我能帮上忙：）