Question

我需要创建两条水平线，它们之间有一个居中的单词。我创建了这段代码：

HTML：

<div class="myRow">preference</div>

的CSS：

.myRow
 {color:red;
  text-align:center;
  border-style:solid;
  border-width:medium;
  border-color:#b2b2ac white #b2b2ac white;}

不幸的是，顶部边框和底部边框在末端不直。

如何在盒子的顶部和底部获得完美的矩形边框？

Answer 1

边界以角度相遇。它们相遇的角度取决于每个边界的相对大小。如果它们的宽度相等，则角度为45度......如果不相同，则角度不同。

示例：

$params = [
            'index' => 'index',
            'type' => 'product-list',
            'body' => [
                "query" => [
                    "filtered" => [
                        "query" => [
                            "match_all" => [],
                        ],
                        'query' => $query,

                        "filter" => [
                            "nested" => [
                                "path" => "default_product_low_price_with_seller",
                                "filter" => [
                                    "bool" => [
                                        "should" => [
                                            [
                                                "range" => [
                                                    "default_product_low_price_with_seller.sale_price" => [
                                                        "gte" => $_GET['filter']['price']['from'],
                                                        "lte" => $_GET['filter']['price']['to'],
                                                    ],
                                                ],
                                            ],
                                            [
                                                "range" => [
                                                    "default_product_low_price_with_seller.sale_end" => [
                                                        "gte" => $now,
                                                    ],
                                                ],
                                            ],
                                            [
                                                "range" => [
                                                    "default_product_low_price_with_seller.sale_start" => [
                                                        "lte" => $now,
                                                    ],
                                                ],
                                            ],

                                        ],
                                    ],
                                ],
                                "filter" => [
                                    "bool" => [
                                        "should" => [
                                            [
                                                "range" => [
                                                    "default_product_low_price_with_seller.selling_price" => [
                                                        "gte" => $_GET['filter']['price']['from'],
                                                        "lte" => $_GET['filter']['price']['to'],
                                                    ],
                                                ],
                                            ],
                                            [
                                                "range" => [
                                                    "default_product_low_price_with_seller.sale_end" => [
                                                        "lte" => $now,
                                                    ],
                                                ],
                                            ],
                                            [
                                                "range" => [
                                                    "default_product_low_price_with_seller.sale_start" => [

                                                        "gte" => $now,
                                                    ],
                                                ],
                                            ],

                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
                "aggs" => [
                    "brand_name" => ["terms" => ["field" => "brand_name"]],
                    "category_with_in_title" => [
                        "nested" => [
                            "path" => "category_with_in_title.parent_cat",
                        ],
                        "aggs" => [

                            "category_with_in_title.title" => ["terms" => ["field" => "category_with_in_title.parent_cat.title"]],
                        ],
                    ],
                ],
            ],
        ];

.box {
  width: 50px;
  height: 50px;
  margin: 10px 25px;
  background: lightblue;
  display: inline-block;
}
.large {
  border-top: 50px solid red;
  border-left: 50px solid green;
}
.medium {
  border-top: 50px solid red;
  border-left: 10px solid green;
}

因此，要有一个方形端，其中一个宽度需要为零。在您的情况下，两端都需要这样做，将侧边宽度更改为0。

<div class="box large"></div>

<div class="box medium"></div>

.myRow {
  color: red;
  text-align: center;
  border-style: solid;
  border-width: medium 0;
  border-color: #b2b2ac white;
  width: 80%;
  margin: 1em auto;
}

Answer 2

您可以删除border-left和border-right，如下所示。

.myRow {
  color: red;
  text-align: center;
  border-style: solid;
  border-width: medium;
  border-color: #b2b2ac white #b2b2ac white;
  border-left: none;
  border-right: none;
}

<div class="myRow">preference</div>

Answer 3

尝试使用以下代码，希望这适合您。

.myRow {
  color:red;
  text-align:center;
  border-style:solid;
  border-width:3px 0;
  border-color:#b2b2ac;
}

<div class="myRow">preference</div>

Answer 4

试试这个

.myRow {
  display: table;
  margin: 0 auto;
  color: red;
  text-align: center;
  border-style: solid;
  border-width: medium;
  border-color: #b2b2ac;
  border-left: none;
  border-right: none;
  }
<div class="myRow">preference</div>

边框顶部和底部没有三角形切割

4 个答案: