Question

我必须在卡片中画出对角线的一半三角形，但是我不知道如何带出该图所示的确切输出，并且我也上传了我的代码，所以请有人知道如何实现同样的效果图片，请让我知道作为参考，我已在此处Output

上传了例外的输出图片

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="end"
                android:text="Name" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="@android:color/transparent"
                android:text="Name" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorPrimary" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="end"
                android:text="Name" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="@android:color/transparent"
                android:text="Name" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorPrimary" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="end"
                android:text="Name" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="@android:color/transparent"
                android:text="Name" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorPrimary" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="end"
                android:text="Name" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="@android:color/transparent"
                android:text="Name" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/colorPrimary" />
    </LinearLayout>

</android.support.v7.widget.CardView>

.cards{
    border-bottom: 148px solid red;
    border-left: 158px solid transparent;
}
.empty-space-section6 {
    height: 411px;
    width: 230px;
    border-color: gray;
    margin-left: 20px;
    margin-top: 16.5px;
    margin-bottom: 52.5px;
    background-color: #FFFBE2;
}

Answer 1

您需要增加边框宽度并将对齐方式设置为正确，以实现此目的。检查以下更新的代码段：

.cards {
    border-bottom: 180px solid red;
    border-left: 280px solid transparent;
    float: right;
}
.empty-space-section6 {
    height: 411px;
    width: 230px;
    border-color: gray;
    margin-left: 20px;
    margin-top: 16.5px;
    margin-bottom: 52.5px;
    background-color: #FFFBE2;
    overflow: hidden;
}

<div class="empty-space-section6">
  <div class="cards">
  </div>
</div>

Answer 2

您可以使用positioning来实现这一目标。

.cards{
    border-bottom: 248px solid red;
    border-left: 358px solid transparent;
    position: absolute;
    bottom: 0;
    left: -50px;
}
.empty-space-section6 {
    height: 411px;
    width: 230px;
    border-color: gray;
    margin-left: 20px;
    margin-top: 16.5px;
    margin-bottom: 52.5px;
    background-color: #FFFBE2;
    position: relative;
    overflow: hidden;
}

<div class="empty-space-section6">
      <div class="cards">
        
      </div>
    </div>

Answer 3

我会考虑使用一个简单的linear-gradient作为背景，这样您就不必弄乱边框了。例如

article {
  width: 240px;
  height: 360px;
  box-shadow: 0 0 5px #999;
  background: linear-gradient(-25deg, #9864bb 160px, #ffffff 162px);
}

<article></article>

在此示例中，渐变从底部到顶部开始，但是您当然可以更改其锚定方式和颜色停止值。

如何解决三角形对齐问题，我的代码没有错

3 个答案: