javascript - 如何使用 CSS 编写特定样式的业务组件组合？

Question

以下样式的业务组件组合用css编写完成？

已经忙乎一两天了也画不出满意的效果

Answer 1

使用before after分别创建一个三角，白的覆盖在黑的上面

.speech-bubble {
            margin: auto;
            width: 200px;
            height: 300px;
            background: white;
            border: 2px solid black;
            border-radius: 25px;
            position: relative;
        }

        .speech-bubble:before {
            content: "";
            position: absolute;
            top: 20px;
            left: -24px; 
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 12px 24px 12px 0; 
            border-color: transparent white transparent transparent;
        }

        .speech-bubble:after {
            content: "";
            position: absolute;
            top: 20px;
            left: -26px; 
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 14px 26px 14px 0; 
            border-color: transparent black transparent transparent;
            z-index: -1; 
        }

Answer 2

由于我无法直接看到你的图片内容（/img/bVdc4Zm 只是一个占位符），我将基于一个常见的业务组件组合样式来提供一个基本的 CSS 示例。假设你有一个包含标题、描述、按钮和图片的组合：

/* 假设你的HTML结构是这样的 */
.business-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px; /* 根据需要设置宽度 */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.business-component .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.business-component .description {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.business-component .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.business-component .button:hover {
    background-color: #0056b3;
}

.business-component .image {
    width: 100%; /* 或者其他适当的宽度 */
    height: auto;
    margin-top: 20px;
    border-radius: 5px;
}

/* 假设你的HTML代码类似于这样 */
<div class="business-component">
    <div class="title">业务组件标题</div>
    <div class="description">这里是业务组件的描述。</div>
    <button class="button">点击按钮</button>
    <img class="image" src="your-image-source.png" alt="业务组件图片">
</div>

请注意，这个示例是基于对一般业务组件样式的猜测。你可能需要根据你的具体图片内容和设计需求来调整 CSS 样式。

如果你有一个具体的图片，并且希望针对那个图片来定制样式，你可能需要添加更多的 CSS 规则来处理图片的尺寸、边距、对齐方式等。

如果你有更具体的设计需求或HTML结构，请提供详细信息，以便我能给出更准确的答案。