anathem

<%= form_for (@post), html: { class: 'form-horizontal' } do |f| %>
    <div class="form-group">
        <%= f.label :body, "Контент" %>
        <%= f.text_field :body, class: 'form-control' %>
    </div>
<% end %>

Например.

Если бы накидали хотя бы схематично, — было бы лучше.
1. Край внутри блока:
Менюшка

.menu {
  background-image: url('yourimage.png');
  background-repeat: repeat-y;
  background-position: 0px 0px;
}

Будет заливка по левому краю (по оси-y)… Что бы сделать по правому, — играемся с background-position.
2. Проще всего будет поместить див в другой див, задаем им обои ширину (width), внешнему отступы (padding), и внешнему делаем тоже самое :)

Вот это классное, — приведет имеющиеся знания в порядок, да еще и в приятном интерактивном режиме :)

css-tricks.com/examples/ShapesOfCSS/

#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}