Question

我正在做一个左三角形的块。我通过将一个三角形应用到另一个三角形来实现但三角形边框有2-3px而不是1px。怎么解决？也许您了解其他实施方式？非常感谢.............................................. .......................... .................................... ....................................

#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #fff;
    text-align: center;
    height: 110px;
    width: 180px;
    position: relative;
    margin: 0 10px 0 0;     
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    border: 1px solid #e6e6e6;
}
#crumbs ul li{
    list-style:none;
}

#crumbs ul li a:before {
    content: '';
    border-top: 56px solid transparent;
    border-bottom: 56px solid transparent;
    border-right: 13px solid #e6e6e6;
    position: absolute;
    left: -13.7px;
    top: -1px;
    z-index: 2;
}

#crumbs ul li a:after {
    content: '';
    border-top: 55px solid transparent;
    border-bottom: 55px solid transparent;
    border-right: 11px solid #fff;
    position: absolute;
    left: -11.5px;
    top: 0px;
    z-index: 2;
}

#crumbs ul li a span:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 50%;
    z-index: 99;
}

<div id="crumbs">
    <ul>
        <li>
            <a href="#">
                <span></span>
                <img src="1.png" alt="" />
            </a>
        </li>
    </ul>
</div>

Answer 1

＆＃13;

<info>
    <parent index="0">
        <name>test1</name>
        <children />
        <impvalue>false</impvalue>
    </parent>
    <parent index="1">
        <name>test2</name>
        <children>
            <VALUE index="0">test3</VALUE>
            <VALUE index="1">test4</VALUE>
        </children>
        <impvalue>true</impvalue>
    </parent>
    <parent index="2">
        <name>test3</name>
        <impvalue>true</impvalue>
    </parent>
    <parent index="3">
        <name>test4</name>
        <impvalue>false</impvalue>
    </parent>
</info>

＆＃13;

#crumbs ul li a {
    display: block;
    float: left;
    height: 50px;
    background: #fff;
    text-align: center;
    height: 110px;
    width: 180px;
    position: relative;
    margin: 0 10px 0 0;     
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    border: 1px solid #e6e6e6;
}
#crumbs ul li{
        list-style:none;
}

#crumbs ul li a:before {
    content: "";
	border-top: 56px solid transparent;
	border-bottom: 56px solid transparent;
	border-right: 13px solid #e6e6e6;
	position: absolute;
	left: -14px;
	top: -1px;
	z-index: 2;
}

#crumbs ul li a:after {    
content: "";
    border-top: 56px solid transparent;
    border-bottom: 56px solid transparent;
    border-right: 13px solid #fff;
    position: absolute;
    left: -13px;
    top: -1px;
    z-index: 2;
}

#crumbs ul li a span:before {
	content: '';
	position: absolute;
	top: 50%;
	left: -6px;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border: 1px solid #e6e6e6;
	background: #fff;
	border-radius: 50%;
	z-index: 99;
	}

＆＃13;

您的像素值有点偏差。我把它们清理了一下，现在边框的宽度一致。

与div的三角形

1 个答案: