Нарисуйте прямоугольник и 2 дополнительных квадрата с помощью CSS

Question

Нарисуйте прямоугольник и 2 дополнительных квадрата с помощью CSS

0

В настоящее время я пытаюсь сделать следующее изображение с помощью CSS

У меня есть этот код, который помогает мне с прямоугольником. Здесь у меня есть демо.

div.bonecard {
    width: 3.4in;
    height: 2.1in;
    border: 2px solid black;
    padding: 10px;
    -webkit-border-radius: .2in;
    -webkit-border-top-right-radius: .5in;
    -webkit-border-bottom-right-radius: .5in;
    -moz-border-radius: .2in;
    -moz-border-radius-topright: .5in;
    -moz-border-radius-bottomright: .5in;
    border-radius: .2in;
    border-top-right-radius: .5in;
    border-bottom-right-radius: .5in;
}

Как нарисовать дополнительные компоненты?

Diego 06 май 2014, в 02:46

Источник

0

Возможно, вы захотите взглянуть на атрибут позиции CSS .
Zhihao 06 май 2014, в 00:18

Теги:

html

css

2 ответа

2

Вы можете сделать это с помощью ::before и ::after псевдоэлементов.

http://jsfiddle.net/Eg53q/1/

div.bonecard:before, 
div.bonecard:after {
    position: absolute;
    left: -24px;
    top: 30px;
    width: 20px;
    height: 10px;
    border: 2px solid #000;
    content: ' ';
}

div.bonecard:after {
    top: 100px;
    width: 20px;
    height: 20px;
    content: ' ';
}

Это означает, что вам не нужно добавлять лишний HTML для достижения презентационного эффекта.

Ming 05 май 2014, в 23:21

Ещё вопросы

Возможно, вы захотите взглянуть на атрибут позиции CSS .

joepour · Accepted Answer · 2014-05-05T23-10-00.000Z

Вы можете использовать псевдоэлементы ::before и ::after

https://jsfiddle.net/Eg53q/2/