css - 如何删除两个对 Angular 相对的 css 斜 Angular 三 Angular 形之间的线?

标签 css shapes css-shapes

我用过:

http://apps.eky.hk/css-triangle-generator/

为彼此对 Angular 放置的两个不等边三 Angular 形生成 css:

左下三 Angular

width: 0px;
height: 0px;
border-style: solid;
border-width: 317px 0 0 512px;
border-color: transparent transparent transparent #007bff;

右上三 Angular 形

width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 317px 512px;
border-color: transparent transparent #007bff transparent;

虽然在这个测试 jsFiddle 中,两个三 Angular 形之间似乎有一条线或间隙,但我无法摆脱它:

http://jsfiddle.net/rwone/MB5Lt/4/

编辑

解决方案似乎是使两个三 Angular 形的宽度都为 514px,即使容器是 512px。

最佳答案

一种解决方案是为其中一个三 Angular 形提供与边框颜色值相同的背景颜色(在本例中为 #007bff)。然后在 Javascript 函数中,在开始动画之前快速移除背景色。

Updated fiddle .

关于css - 如何删除两个对 Angular 相对的 css 斜 Angular 三 Angular 形之间的线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18441546/

相关文章:

html - 如何创建对话泡泡?

html - 如何像黑色标题框一样显示 YouTube?

css - 少提示@brand-success 是未定义的,即使它在 variables.less

css - 样式 Bootstrap 卡标题不起作用

python - 固定代码以制作三角形

css - 你将如何在 CSS 中制作这个形状?

html - 如何删除 Bootstrap 中不同列中两个 div 之间的空间

c++ - SFML 形状无限旋转

android canvas 绘制圆圈并获取触摸事件

html - 我怎样才能使 Css Shape 像第一张图片一样