Фигура выходит За пределы блока?

Question

[Лобстер]

У меня в секции 3 элементов col-md-4. как видно на картинке есть ромбик. Я взял прямоугольник и просто повернул его, но он выходит за пределы item`а. Что я делаю не так и как это исправить?

<div class="col-md-4 col-sm-4">
					<div class="features_item">
						<div class="features_diamond"><span class="features_icon"></span></div>
						<h4 class="features_workout">Strength training</h4>
						<p class="features_text">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p>
						<p class="features_text">Maecenas mattis vitae tellus vel interdum. Quisque lacinia mauris id convallis pretium. Aliquam id odio sit amet mauris porttitor iaculis a eu dui.</p>
					</div>
				</div>

.features
	background-color: $white
	min-height: 870px
	padding: 50px 0 40px
	text-align: center
	&_training
		margin-top: 46px
	&_item
		margin: 35px 0 30px
	&_diamond
		width: 74px
		height: 74px
		background-color: $red
		margin: 0 auto 30px
		transform: rotate(45deg)
	&_icon
	&_workout
		font-size: 18px
		font-weight: 700
		text-transform: uppercase
		color: $dark-gray
		margin: 0
	&_text
		font-size: 13px
		font-weight: 400
		color: $gray-light
		margin: 29px 0 0

Answer 1

[Ivan Bogachev]

Я взял прямоугольник и просто повернул его, но он выходит за пределы item`а.

Ну так transform так и работает. Ничего странного тут не произошло.

Comments

[Лобстер]

Вот совсем никакой помощи нет

[Ivan Bogachev]

Лобстер: Вы не сказали, что вы хотели в конечном итоге получить. Сказали "я сделал вот так и оно работает не так, как я ожидал". Какую помощь вы расчитывали получить?